Jetpack Compose LazyColumn 滚动侦听器

Question

当用户滚动浏览下面列表中的每个“查看更多”项目时，我想以编程方式更改选择的选项卡。我怎样才能最好地做到这一点？

Answer 1

作为 Ryan M writes，您可以使用 LazyListState.firstVisibleItemIndex。 Compose 的神奇之处在于，您只需在 if 语句中使用它，Compose 就会完成这项工作。请看以下示例，它根据第一个可见项显示不同的文本。同样，您可以根据第一个可见项目选择不同的选项卡。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            val listState = rememberLazyListState()

            Column {
                Text(if (listState.firstVisibleItemIndex < 100) "< 100" else ">= 100")
                LazyColumn(state = listState) {
                    items(1000) {
                        Text(
                            text = "$it",
                            modifier = Modifier.fillMaxWidth(),
                        )
                    }
                }
            }
        }
    }
}

Answer 2

您可以使用 LazyListState.firstVisibleItemIndex 属性（通过 rememberLazyListState 获得并设置为 state 参数为 LazyColumn）并基于此设置当前选项卡。

读取该属性被认为是 Compose 中的模型读取，因此只要第一个可见项目发生变化，它就会触发重组。

如果您想根据不只是第一个可见项目来做一些更复杂的事情，您可以使用 LazyListState.layoutInfo 来获取有关所有可见项目及其位置的信息，而不是只是第一个。