Jetpack Compose Wear OS：ScalingLazyColumn默认行为Bug求助

问题场景 #

在Jetpack Compose Wear OS中使用ScalingLazyColumn组件，内部嵌套一段长文本后，启动应用时焦点会自动定位到文本底部而非开头。调整ScalingLazyColumn的anchorType、autoCentering、scalingParams等参数均无法解决该问题，需要实现启动时聚焦于第一个元素的开头位置。

用户原实现代码：

@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"

解决方案 #

方法一：强制滚动+主动请求文本焦点 #

通过LaunchedEffect在组件初始化时触发列表滚动到顶部，同时给文本组件添加焦点请求器，主动将焦点定位到文本开头。

修改后的代码：

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

    // 首次组合时滚动到列表顶部并请求文本焦点
    LaunchedEffect(Unit) {
        scalingLazyState.scrollToItem(index = 0)
        textFocusRequester.requestFocus()
    }

    Scaffold(
        modifier = modifier,
        positionIndicator = { PositionIndicator(scalingLazyListState = scalingLazyState) }
    ) {
        ScalingLazyColumn(
            modifier = Modifier.scrollableColumn(columnFocusRequester, scalingLazyState),
            state = scalingLazyState,
        ) {
            item {
                Text(
                    longText,
                    Modifier
                        .padding(top = 20.dp, start = 16.dp, end = 16.dp, bottom = 48.dp)
                        .focusRequester(textFocusRequester)
                        .focusable(), // 标记文本可获取焦点
                    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"

方法二：配合autoCentering参数强化定位 #

如果方法一效果不稳定，可以给ScalingLazyColumn添加autoCentering参数，强制将第一项居中对齐，配合滚动操作确保定位准确：

ScalingLazyColumn(
    modifier = Modifier.scrollableColumn(columnFocusRequester, scalingLazyState),
    state = scalingLazyState,
    autoCentering = AutoCenteringParams(itemIndex = 0, itemOffset = 0) // 强制第一项顶部对齐
) {
    // 内容不变
}

关键说明 #

1. LaunchedEffect(Unit)仅在组件首次初始化时执行，避免重复触发滚动操作。
2. 给Text组件添加focusable()和focusRequester，可以覆盖系统默认的焦点分配逻辑，确保焦点落在文本开头。
3. scrollToItem(0)直接强制列表滚动到第一项，从视图层面保证内容定位在顶部。

内容的提问来源于stack exchange，提问作者konnovdev