Jetpack Compose LazyRow 和 LazyColumn 用于类别部分自动滚动答案

【问题标题】：Jetpack Compose LazyRow and LazyColumn for category section auto scrollingJetpack Compose LazyRow 和 LazyColumn 用于类别部分自动滚动
【发布时间】：2021-12-19 19:45:08
【问题描述】：

我正在尝试构建一个包含两个主要项目的屏幕。其中一个需要是一个水平滚动组件，我将在其中放置一些类别，第二个是一个lazyColumn，其下方有一个标题+一些子类别图块（卡片）

我想要实现的行为是，每当您单击 LazyRow 上的某个项目时，下面的 LazyColumn 就会滚动到该部分，反之亦然，当滚动 LazyColumn 时，LazyRow 会反映它滚动到的部分.

我可以通过使用lazyListState 来实现单击LazyRow 上的项目并滚动LazyColumn 的第一个要求，但是，我无法实现其他行为。可以使用一些想法！

谢谢

【问题讨论】：

标签： kotlin android-jetpack-compose android-jetpack

【解决方案1】：

onGloballyPositioned 检索您可组合的位置，您可以使用它来导航到您的内容。

如果你觉得有帮助，我写了一些代码来演示一下。

val scope = rememberCoroutineScope()
val scrollState = rememberScrollState()
var scrollDestination by remember { mutableStateOf(0f) }

Column(Modifier.verticalScroll(scrollState)) {
    LazyRow(modifier = Modifier.padding(6.dp)) {
        items(5) {
            Button(modifier = Modifier
                .padding(8.dp),
                onClick = {
                    scope.launch {
                        scrollState.animateScrollTo(scrollDestination.roundToInt())
                    }

                }) {
                Text(text = "Scroll")
            }
        }
    }


    Canvas(modifier = Modifier.size(1000.dp)) {
        drawRect(color = Color.Green, size = size)
    }


    Text(
        "Content",
        modifier = Modifier.onGloballyPositioned { position ->
            scrollDestination = position.positionInParent().y
        }
    )
    Canvas(modifier = Modifier.size(500.dp)) {
        drawRect(color = Color.Red, size = size)
    }

}

【讨论】：

感谢您的代码，我确实从中学到了一些东西。即使从行滚动对此有效，但我也想实现反之亦然的行为，例如：假设我滚动列表，该行保持在屏幕顶部（当然我确实做到了）和屏幕上显示的内容将行中的相应按钮切换到选定状态。就像类别列表一样，当您滚动时，该行会显示当前显示的类别。有没有可能做到这一点？