android-jetpack-compose - ScalingLazyColumn (Jetpack Compose Wear OS) 默认行为中的错误

Question

我正在使用 ScalingLazyColumn，里面有很长的 Text，如下所示:

@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. 将 anchor 类型设置为 ScalingLazyListAnchorType.ItemStart
3. 从您的项目中删除顶部填充
4. 对状态 initialItem initialCenterItemScrollOffset 应用偏移量，将项目的开始向上移动一点。
5. 可选地调整 autoCentering 以确保滚动的限制与状态中选择的初始位置相匹配

@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,
                )
            }
        }

    }
}

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

Initial screen