Jetpack Compose LazyColumn 滚动侦听器

Question

我想以编程方式更改选择哪个选项卡，因为用户滚动经过下面列表中的每个“查看更多”项目。我将如何最好地完成此操作？

Answer 1

只需创建一个NestedScrollConnection并将其分配给父视图nestedScroll修饰符：

val nestedScrollConnection = remember {
    object : NestedScrollConnection {
        override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
            val delta = available.y
            // called when you scroll the content
            return Offset.Zero
        }
    }
}

将其分配给LazyColumn或分配给其父组合视图：

Modifier.nestedScroll(nestedScrollConnection)

示例：

LazyColumn(
    ...
    modifier = Modifier.nestedScroll(nestedScrollConnection)
) {
    items(...) {
       Text("Your text...")
    }
}

Answer 2

正如Ryan M 所写，您可以使用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 3

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

读取该属性被视为在 Compose 中读取模型，因此只要第一个可见项发生更改，它就会触发重组。

如果您想要基于不仅仅是第一个可见项目执行更复杂的操作，则可以使用LazyListState.layoutInfo来获取有关所有可见项目及其位置的信息，而不仅仅是第一个可见项目。