如何获取LazyList项的索引并动态更新文本内容

我实现了一个带有snappingLayout行为的LazyRow，其项数对应一个日期列表的长度，调用时传入dateName = listOf("Monday", "Tuesday", "Wednesday", "Thursday")。目前顶部的Text硬编码为dateName[0]，希望改成根据snappingLayout停驻的索引位置动态显示对应的日期。

原尝试代码：

@Composable
fun MainUi() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(MaterialTheme.colorScheme.background)
    ) {
        GetScrollIndex(dateName = listOf("Monday", "Tuesday", "Wednesday", "Thursday"))
    }
}
@Suppress("OPT_IN_IS_NOT_ENABLED")
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun GetScrollIndex(dayName: List<String>) {
    val state = rememberLazyListState()
    val snappingLayout = remember(state) { SnapLayoutInfoProvider(state) }
    val flingBehavior = rememberSnapFlingBehavior(snappingLayout)
    Column {
        Text(
            modifier = Modifier
                .fillMaxWidth(),
            text = dateName[0],
            style = GoogleSansTypography.titleMedium,
            color = MaterialTheme.colorScheme.secondary,
            textAlign = TextAlign.Center
        )
        LazyRow(
            state = state,
            flingBehavior = flingBehavior,
            modifier = Modifier
                .fillMaxSize(),
            contentPadding = PaddingValues(
                horizontal = 30.dp,
                vertical = 40.dp
            ),
            horizontalArrangement = Arrangement.spacedBy(10.dp)
        ) {
            items(dayName.size) {
                Card(
                    modifier = Modifier
                        .fillParentMaxSize(),
                    colors = CardDefaults.cardColors(MaterialTheme.colorScheme.primary)
                ) {

                }
            }
        }
    }
}

要实现动态显示当前停驻项的日期，需要通过LazyListState监听滚动状态，计算当前处于中心位置的项索引，再关联到日期列表：

1. 计算当前选中的索引：使用derivedStateOf基于LazyListState的可见项信息，找到当前在视图中心的项索引——由于snappingLayout会将项对齐到中心，通过判断可见项的位置即可确定当前选中项。
2. 动态更新文本：将Text的text参数替换为计算出的索引对应的日期，同时处理列表为空的边界情况。

修改后的完整代码：

@Composable
fun MainUi() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(MaterialTheme.colorScheme.background)
    ) {
        GetScrollIndex(dateName = listOf("Monday", "Tuesday", "Wednesday", "Thursday"))
    }
}

@Suppress("OPT_IN_IS_NOT_ENABLED")
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun GetScrollIndex(dateName: List<String>) {
    val state = rememberLazyListState()
    val snappingLayout = remember(state) { SnapLayoutInfoProvider(state) }
    val flingBehavior = rememberSnapFlingBehavior(snappingLayout)

    // 计算当前停驻的项索引
    val currentIndex by remember {
        derivedStateOf {
            val layoutInfo = state.layoutInfo
            val visibleItems = layoutInfo.visibleItemsInfo
            if (visibleItems.isEmpty()) return@derivedStateOf 0

            // 找到视图中心位置对应的项
            val centerX = layoutInfo.viewportStartOffset + layoutInfo.viewportSize.width / 2
            visibleItems.minByOrNull {
                kotlin.math.abs(it.offset + it.size / 2 - centerX)
            }?.index ?: 0
        }
    }

    Column {
        Text(
            modifier = Modifier.fillMaxWidth(),
            // 使用当前索引对应的日期，处理空列表与索引越界情况
            text = if (dateName.isNotEmpty()) dateName[currentIndex.coerceIn(0, dateName.lastIndex)] else "",
            style = GoogleSansTypography.titleMedium,
            color = MaterialTheme.colorScheme.secondary,
            textAlign = TextAlign.Center
        )
        LazyRow(
            state = state,
            flingBehavior = flingBehavior,
            modifier = Modifier.fillMaxSize(),
            contentPadding = PaddingValues(horizontal = 30.dp, vertical = 40.dp),
            horizontalArrangement = Arrangement.spacedBy(10.dp)
        ) {
            items(dateName.size) {
                Card(
                    modifier = Modifier.fillParentMaxSize(),
                    colors = CardDefaults.cardColors(MaterialTheme.colorScheme.primary)
                ) {
                    // 可选：在Card内添加日期文本，方便直观查看对应关系
                    Text(
                        text = dateName[it],
                        modifier = Modifier.padding(16.dp),
                        color = MaterialTheme.colorScheme.onPrimary
                    )
                }
            }
        }
    }
}

关键说明 #

• derivedStateOf用于创建基于LazyListState的派生状态，仅当可见项信息变化时重新计算，避免不必要的重组。
• 通过计算视图中心与每个可见项中心的距离，找到最近的项作为当前选中项，完美匹配snappingLayout的停驻行为。
• 使用coerceIn(0, dateName.lastIndex)确保索引不会越界，同时处理日期列表为空的异常情况。

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