Jetpack Compose LazyList分页按钮动态切换算法实现咨询

实现方案 #

首先直接给出修改后的可运行完整代码：

private const val VISIBLE_PAGE_COUNT = 5
private const val PAGE_SIZE = 100

@Composable
fun SomeScreen(state: SomeViewModelState) {
    val currentLogsList by MutableStateFlow(state.currentLogs).collectAsState()
    // 优化：分块逻辑放在remember中计算，避免不必要的状态流转
    val chunkedLogsList by remember(currentLogsList) {
        mutableStateOf(currentLogsList.chunked(PAGE_SIZE))
    }
    val totalPages = chunkedLogsList.size

    var chunkedIndex by remember { mutableStateOf(0) }
    // 边界处理：数据更新总页数减少时，自动修正选中下标避免越界崩溃
    LaunchedEffect(totalPages) {
        if (chunkedIndex >= totalPages && totalPages > 0) {
            chunkedIndex = totalPages - 1
        }
    }

    Content(currentLogsList = if (totalPages > 0) chunkedLogsList[chunkedIndex] else emptyList())
    
    // 核心逻辑：计算当前需要显示的页码区间
    val visiblePageRange = remember(chunkedIndex, totalPages) {
        if (totalPages <= VISIBLE_PAGE_COUNT) {
            return@remember 0 until totalPages
        }
        // 默认让当前选中页码居于可见区间的中间位置
        var start = (chunkedIndex - (VISIBLE_PAGE_COUNT / 2)).coerceAtLeast(0)
        var end = start + VISIBLE_PAGE_COUNT
        // 区间超出总页数时回退调整
        if (end > totalPages) {
            end = totalPages
            start = (end - VISIBLE_PAGE_COUNT).coerceAtLeast(0)
        }
        start until end
    }

    LazyRow(modifier = Modifier.padding(horizontal = 20.dp)) {
        items(visiblePageRange.toList()) { pageIndex ->
            OutlinedButton(
                onClick = { chunkedIndex = pageIndex },
                modifier = Modifier.padding(horizontal = 5.dp),
                // 可选：高亮当前选中的页码，提升交互体验
                colors = if (pageIndex == chunkedIndex) ButtonDefaults.outlinedButtonColors(
                    containerColor = Color.Blue,
                    contentColor = Color.White
                ) else ButtonDefaults.outlinedButtonColors()
            ) {
                Text(
                    text = (pageIndex + 1).toString(),
                    fontSize = 14.sp
                )
            }
        }
    }
}

@Composable
private fun Content(
    currentLogsList: List<LogEntity>,
) {
    LazyColumn(
        modifier = Modifier
            .height(400.dp)
            .padding(top = 10.dp, bottom = 20.dp, start = 20.dp, end = 20.dp),
    ) {
        items(currentLogsList) {
            // 原有业务渲染逻辑
        }
    }
}

核心实现逻辑说明：

• 固定显示5个页码，计算可见区间时默认让当前选中的页码居于中间位置，完全匹配你需要的点击跳转效果
• 边界兼容：选中页码靠近头部时固定显示前5个页码，靠近尾部时固定显示最后5个页码，不会出现空白或下标越界问题
• 优化了原有分块逻辑的性能，避免不必要的状态更新，同时新增了数据动态变化时的下标修正逻辑，避免崩溃

内容的提问来源于stack exchange，提问作者dbuzin