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

Question

在我的 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 是必须可见的元素的索引 默认情况下 。我的意思是，当合成发生时。但是用户当然可以稍后更改位置。

换句话说：

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

Answer 1

你只需要使用方法参数，

val state = rememberScrollState(initial = mustBeVisibleByDefault)

最好在上网前按 Ctrl + P 查看所有可能的组合。

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

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

Answer 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)
        }
    }
}

但还是要在多台设备上测试。

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

Accompanist FlowRow : is it possible to scroll down automatically in order to show an element?

android

android-jetpack-compose

jetpack-compose-accompanist