Jetpack Compose LazyColumn 滚动监听器答案

【问题标题】：Jetpack Compose LazyColumn Scroll ListenerJetpack Compose LazyColumn 滚动监听器
【发布时间】：2021-08-13 05:48:49
【问题描述】：

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

【问题讨论】：

标签： android list android-jetpack-compose

【解决方案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(),
                        )
                    }
                }
            }
        }
    }
}

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

您能否提供有关实施的更多详细信息？我将如何使用 LazyListState.firstVisibleItemIndex 来更改当前选项卡？
layoutInfo 的问题在于它会触发重组。可能是撰写中的错误。
@DmytroIvanov 读取一个状态确实会在该状态更改时触发重组。这是按预期工作的。您认为什么是错误？
实际上，我意识到这不是一个错误，是的，它基本上是一个重组，因为我们读取了一个状态。

【解决方案3】：

只需创建一个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...")
    }
}

【讨论】：