使用compose+paging3+jsoup實現雙色球數據分頁加載,并且添加了手勢動作,既可拖動也可縮放


雙色球走勢圖是比較大的,圖表可拖動可縮放是很硬性的要求,而我在實現這個功能時又遇到了很大的困難,不過最終還是完成了,所以在此重新記錄一下。
1,首先在google官網中找到在compose中實施拖動和縮放動作的代碼
2,套用在這篇文章中:Compose+Paging3+Retrofit實現列表分頁加載
下面重新貼上主要的相關代碼

    implementation "dev.chrisbanes.accompanist:accompanist-coil:0.6.0"http://coil
    implementation 'org.jsoup:jsoup:1.13.1' //jsoup
    implementation "androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha02"
    implementation "androidx.paging:paging-runtime:3.0.0-beta02"
    implementation "androidx.paging:paging-compose:1.0.0-alpha08"

LotteryActivity

class LotteryActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
           LeftModeScreen()
        }
    }
}

LotteryViewModel

class LotteryViewModel: ViewModel() {
    val lotterys = Pager(PagingConfig(pageSize = 50)){
        LotteryPagingSource(LotteryRepository)
    }.flow.cachedIn(viewModelScope)
}

LotteryData

data class Lottery(
    val code :String,   //開獎號碼
    val issue :String,//期號
) : Serializable

LotteryRepository

object LotteryRepository {

    private const val TARGET_URL = "https://datachart.500.com/ssq/history/newinc/history.php"

    suspend fun getLotterys(page: Int): MutableStateFlow<List<Lottery>> {

        val lotterys = MutableStateFlow<List<Lottery>>(listOf())
        val lotteryList: MutableList<Lottery> = mutableListOf()

        withContext(Dispatchers.IO) {
            val doc =
                //"https://datachart.500.com/ssq/history/newinc/history.php?start=21001&end=21200"
                Jsoup.connect(TARGET_URL + "?start=${page}001&end=${page}200").get()
            val element: Element = doc.getElementById("tdata")
            val elements: Elements = element.select("tr.t_tr1")
            elements.forEach { item ->
                val aaa: Elements = item.select("td")
                if (!aaa.isNullOrEmpty()) {
                    val bbb = Lottery(
                        code = aaa[1].text() + "," +
                                aaa[2].text() + "," +
                                aaa[3].text() + "," +
                                aaa[4].text() + "," +
                                aaa[5].text() + "," +
                                aaa[6].text() + "  " +
                                aaa[7].text(),
                        issue = aaa[0].text()
                    )
                    lotteryList.add(bbb)
                }
            }
            lotterys.value = lotteryList
        }
        return lotterys
    }
}

LotteryPagingSource

class LotteryPagingSource(private val repository: LotteryRepository) :
    PagingSource<Int, Lottery>() {

    private val year = TimeUtils.nowTime.substring(2, 4).toInt()//取年份最后兩位 (2021 => 21)

    override suspend fun load(params: LoadParams<Int>): LoadResult<Int, Lottery> {
        return try {
            val page = params.key ?: year//一個年份的開獎數據為一頁
            val response = repository.getLotterys(page)
            LoadResult.Page(
                data = response.value,
                prevKey = null,
                nextKey = if (page > 3) page - 1 else null//"3"為2003年,雙色球從2003年開始的,
            )
        } catch (e: Exception) {
            LoadResult.Error(e)
        }
    }

    override fun getRefreshKey(state: PagingState<Int, Lottery>): Int? {
        return null
    }
}

TimeUitls

object TimeUtils {

    val nowTime: String
        get() {
            val simpleDateFormat = SimpleDateFormat("yyyy-MM-dd HH:mm:ss",Locale.CHINESE)
            val date = Date(System.currentTimeMillis())
            return simpleDateFormat.format(date)
        }
}

下面是一些與compose相關的頁面代碼,由于添加了手勢動作和數據加載錯誤處理,代碼比較多,這里就不一一貼出來了,只貼主要的,部分缺少的可以在文章開頭的那篇文章中找到,還有一些找不到的就自己實現吧。這是一個進行中的項目,代碼根據需要隨時在變化。
Compose+Paging3+Retrofit實現列表分頁加載

@Composable
fun LeftModeScreen() {
    val showPop = remember { mutableStateOf(false) }
    Row(modifier = Modifier.fillMaxSize()) {
        LeftMenuColumn(showPop)//左側菜單欄
        SaleTrasformable{ LotteryList() }//右側走勢圖,可拖動,可縮放
    }
    if (showPop.value) {
        HandModePop(showPop)//切換左右手模式
    }
}

//使組件可拖動、縮放和旋轉
@Composable
fun SaleTrasformable(
    content: @Composable () -> Unit
) {
    val offsetX = remember { mutableStateOf(0f) }
    val offsetY = remember { mutableStateOf(0f) }
    var width by remember { mutableStateOf(0f) }
    val scale = remember { mutableStateOf(1f) }
    val rotation = remember { mutableStateOf(0f) }
    val offset = remember { mutableStateOf(Offset.Zero) }
    val state = rememberTransformableState { zoomChange, offsetChange, rotationChange ->
        scale.value *= zoomChange//縮放
        offset.value += offsetChange//拖動
        // rotation.value += rotationChange//旋轉
    }
    Column(
        modifier = Modifier
            .wrapContentWidth()
            // .background(Color(34, 43, 44, 50))
            .clipToBounds() //放大縮小時,內容限定在這個Column內
            .graphicsLayer(
                scaleX = scale.value,
                scaleY = scale.value,
                // rotationZ = rotation.value,
                translationX = offset.value.x,
                translationY = offset.value.y
            )
            .transformable(state = state)
            .onSizeChanged { width = it.width.toFloat() }
            .offset { IntOffset(offsetX.value.roundToInt(), offsetY.value.roundToInt()) }
            .pointerInput(Unit) {
                forEachGesture {
                    awaitPointerEventScope {
                        val down = awaitFirstDown()
                        val change =
                            awaitHorizontalTouchSlopOrCancellation(down.id) { change, over ->
                                val originalX = offsetX.value
                                val newValue =
                                    (originalX + over).coerceIn(0f, width - 50.dp.toPx())
                                change.consumePositionChange()
                                offsetX.value = newValue
                            }
                        if (change != null) {
                            horizontalDrag(change.id) {
                                val originalX = offsetX.value
                                val newValue = (originalX + it.positionChange().x)
                                    .coerceIn(0f, width - 50.dp.toPx())
                                it.consumePositionChange()
                                offsetX.value = newValue
                            }
                        }
                    }
                }
            }
    ) {
        content()//內容過多,用這種方式可另起一個Composable
    }
}

//妥善處理數據加載過程中的各種異常
@Composable
fun LotteryList(viewModel: LotteryViewModel = viewModel()) {

    val lotterys = viewModel.lotterys.collectAsLazyPagingItems()

    when (lotterys.loadState.refresh) {
        is LoadState.NotLoading -> //正常加載數據
            LazyColumn(
                Modifier.fillMaxSize(),
                reverseLayout = true//反轉數據
            ) {
                itemsIndexed(lotterys) { _, lottery ->
                    LotteryItem(lottery = lottery!!)
                }
                when (lotterys.loadState.append) {//劃到了數據邊界
                    is LoadState.Error -> item {//沒取不到新數據,重試
                        Row(
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(8.dp),
                            verticalAlignment = Alignment.CenterVertically,
                            horizontalArrangement = Arrangement.Center,
                        ) {
                            Button(onClick = {
                                lotterys.retry()
                            }) {
                                Text(text = "重試")
                            }
                        }
                    }
                    is LoadState.Loading -> item {//加載中
                        LoadingPage()
                    }
                }
            }
        is LoadState.Error -> ErrorPage { lotterys.refresh() }//網絡錯誤
        is LoadState.Loading -> LoadingPage()//加載中
    }
}

//將數據的各個字段填入到相應的組件中
@Composable
fun LotteryItem(lottery: Lottery) {
   // DrawCanvas()
    Box(
        modifier = Modifier
            .padding(start = 16.dp, top = 8.dp, bottom = 8.dp)
        //.clickable(onClick = {})
    ) {
        Row(modifier = Modifier.fillMaxWidth()) {
            Column(
                modifier = Modifier.padding(start = 8.dp)
            ) {
                Text(
                    lottery.code,//開獎號碼
                    style = TextStyle(color = Color.Black, fontSize = 16.sp),
                    modifier = Modifier.padding(end = 8.dp),
                    maxLines = 1
                )
            }
            Column(
                modifier = Modifier.padding(start = 8.dp)
            ) {
                Text(
                    lottery.issue,//期號
                    style = TextStyle(color = Color.Black, fontSize = 16.sp),
                    modifier = Modifier.padding(end = 8.dp),
                    maxLines = 1
                )
            }
        }
    }
}

最后,再一次特別的感謝這篇文章的作者,《Compose+Paging3+Retrofit實現列表分頁加載》,正是因為它的及時出現,我又可以愉快地進行下一步的代碼編寫了,感覺離我的設想越來越近了,也越來越相信那個設想是我力所能及的。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容