ScalingLazyColumn (Jetpack Compose Wear OS) 默认行为中的错误

Question

我使用ScalingLazyColumn ，里面有很长的文本，如下所示：

@Preview(device = Devices.WEAR_OS_SMALL_ROUND, showSystemUi = true)
@Composable
fun Test(modifier: Modifier = Modifier) {
    val scalingLazyState = remember { ScalingLazyListState() }
    val focusRequester = remember { FocusRequester() }

    Scaffold(
        modifier = modifier,
        positionIndicator = { PositionIndicator(scalingLazyListState = scalingLazyState) }
    ) {
        ScalingLazyColumn(
            modifier = Modifier.scrollableColumn(focusRequester, scalingLazyState),
            state = scalingLazyState,
        ) {
            item {
                Text(
                    longText,
                    Modifier
                        .padding(top = 20.dp, start = 16.dp, end = 16.dp, bottom = 48.dp),
                    textAlign = TextAlign.Center,
                )
            }
        }

    }
}

val longText =
    "Take the plunge\n" +
            "\n" +
            "commit oneself to a course of action about which one is nervous.\n" +
            "\n" +
            "\"she wondered whether to enter for the race, but decided to take the plunge\"\n" +
            "\"They're finally taking the plunge and getting married.\"\n" +
            "\n" +
            "\n" +
            "plunge:\n" +
            "jump or dive quickly and energetically.\n" +
            "\"our daughters whooped as they plunged into the sea\"\n"

但由于某种原因，当我启动应用程序时，焦点转到文本的底部，而不是开头，这看起来像一个错误。我尝试使用ScalingLazyColumn的不同参数（anchorType、autoCentering、scalingParams）无济于事。

知道如何修复它并在启动应用程序时使ScalingLazyColumn聚焦于第一个元素的开头吗？

Answer 1

关闭自动居中是一个选项，但在大多数情况下我会尝试避免它，因为这将使处理在不同设备尺寸上正确填充变得更加困难，并且通常会导致能够在开头或结尾滚动列表项结束。

当您说您希望将焦点放在第一个项目的开头时，我不确定您到底想要实现什么，但以下内容应该可以满足您的需求。

1. 将状态初始项设置为0
2. 将锚点类型设置为ScalingLazyListAnchorType.ItemStart
3. 移除物品的顶部衬垫
4. 对状态initialItem应用偏移量，initialCenterItemScrollOffset将项目的开头向上移动一点。
5. 可以选择调整自动居中以确保滚动限制与状态中选择的初始位置相匹配

@Preview(device = Devices.WEAR_OS_SMALL_ROUND, showSystemUi = true)
@Composable
fun SingleItemSLCWithLongText(modifier: Modifier = Modifier) {
    val scalingLazyState = remember { ScalingLazyListState(initialCenterItemIndex = 0, initialCenterItemScrollOffset = 80) }
    val focusRequester = remember { FocusRequester() }

    Scaffold(
        modifier = modifier.background(Color.Black),
        positionIndicator = { PositionIndicator(scalingLazyListState = scalingLazyState) }
    ) {
        ScalingLazyColumn(
            modifier = Modifier.scrollableColumn(focusRequester, scalingLazyState),
            autoCentering = AutoCenteringParams(itemIndex = 0, itemOffset = 80),
            state = scalingLazyState,
            anchorType = ScalingLazyListAnchorType.ItemStart
        ) {
            item {
                Text(
                    longText,
                    Modifier
                        .padding(start = 16.dp, end = 16.dp, bottom = 48.dp),
                    textAlign = TextAlign.Center,
                )
            }
        }

    }
}

这是屏幕最初的样子的屏幕截图

初始画面