伴奏 FlowRow ：是否可以自动向下滚动以显示元素？答案

【问题标题】：Accompanist FlowRow : is it possible to scroll down automatically in order to show an element?伴奏 FlowRow ：是否可以自动向下滚动以显示元素？
【发布时间】：2021-11-06 12:05:36
【问题描述】：

在我的 Jetpack Compose 项目中，我的一个组件使用来自 Accompanist 的 FlowRow。但我不知道如何让FlowRow 滚动到给定的“节点”。

这里是我@Composable的相关代码：

sealed class MovesNavigatorElement(open val text: String)
data class MoveNumber(override val text: String) : MovesNavigatorElement(text)
data class HalfMoveSAN(override val text: String) : MovesNavigatorElement(text)

@Composable
fun MovesNavigator(modifier: Modifier = Modifier, elements: Array<MovesNavigatorElement>, mustBeVisibleByDefaultElementIndex: Int) {
    val vertScrollState = rememberScrollState()

    FlowRow(
        modifier = modifier
            .background(color = Color.Yellow.copy(alpha = 0.3f))
            .verticalScroll(vertScrollState),
        mainAxisSpacing = 10.dp,
        crossAxisSpacing = 15.dp,
    ) {
        elements.map {
            Text(text = it.text, fontSize = 34.sp, color = Color.Blue, style= MaterialTheme.typography.body1)
        }
    }
}

您可以在哪里看到我将FlowRow 的“节点”声明为列表：参数elements。另外我在局部变量vertScrollState 中使用了ScrollState。

但是，假设我想让它滚动到elements[30]：我应该怎么做？鉴于mustBeVisibleByDefaultElementIndex 是必须默认可见的元素的索引。我的意思是，当组合发生时。但是用户当然可以稍后改变位置。

换句话说：

在组合时：给定索引的元素可见
然后，当然，在任何其他合成发生之前，用户可以使用滚动条滚动它。

【问题讨论】：

标签： android android-jetpack-compose jetpack-compose-accompanist

【解决方案1】：

你只需要使用方法参数，

val state = rememberScrollState(initial = mustBeVisibleByDefault)

最好先按Ctrl + P 查看所有可能的组合，然后再访问网络。

我保留了这个，以防万一有人觉得它有帮助：-

ScrollState 公开了scrollTo 和animateScrollTo 方法。您可以轻松地使用它们来实现所需的结果。参考the docs

【讨论】：

是的，我已经从文档中看到了这些方法。谢谢你。但是我怎么能针对一个特定的元素呢？我的意思是如何获得在 FlowRow 中注册的给定元素的位置？在我的问题中，我说过我将在参数中传递目标元素索引。如果可能，当然可以。
不清楚。参数是什么？如果您希望它成为 MovesNavigator Composable 的参数，那么您可能对声明式编程的工作方式感到困惑，或者您有一个问题未完全描述的特定用例。只需添加预期布局的简单图像并用外行术语解释行为？大多数提问者的问题在于，他们会提出技术问题，询问如何使一种方法发挥作用，而如果您发布用例，我们可能会提出一种更简单、更好的方法。
您希望它在什么时候滚动到某个位置？您是否希望它在特定索引处加载？
或使用一些导航器或其他东西滚动。只需发布用例
哦！你应该这么说的。现在很清楚了

【解决方案2】：

我如何设法解决（部分）我的问题：

使用普通的ScrollState 而不是rememberScrollState()：因为即使我在重组时将滚动设置为固定值，用户仍然可以移动它。因此，无需“缓存”滚动值
对滚动量使用 sp 到 px 转换，滚动量应为像素值，以及给定索引的硬编码除法量（这就是它仅部分解决的原因）

这让我想到了以下几点：

sealed class MovesNavigatorElement(open val text: String)
data class MoveNumber(override val text: String) : MovesNavigatorElement(text)
data class HalfMoveSAN(override val text: String) : MovesNavigatorElement(text)

@Composable
fun MovesNavigator(modifier: Modifier = Modifier, elements: Array<MovesNavigatorElement>, mustBeVisibleByDefaultElementIndex: Int = 0) {
    val lineHeightPixels = with(LocalDensity.current) {34.sp.toPx()}
    val scrollAmount = ((mustBeVisibleByDefaultElementIndex / 6) * lineHeightPixels).toInt()
    val vertScrollState = ScrollState(scrollAmount)

    FlowRow(
        modifier = modifier
            .background(color = Color.Yellow.copy(alpha = 0.3f))
            .verticalScroll(vertScrollState),
        mainAxisSpacing = 8.dp,
    ) {
        elements.map {
            Text(text = it.text, fontSize = 34.sp, color = Color.Blue, style= MaterialTheme.typography.body1)
        }
    }
}

但仍需在多台设备上进行测试。

【讨论】：