如何在Jetpack Compose滚动页面中实现手柄导航正常工作

当给Column添加verticalScroll修饰符后，这个Column会成为一个可滚动的焦点容器，默认情况下系统无法正确识别容器内的可焦点元素作为顶部栏焦点的下一个导航目标，导致按下方向键时焦点无法从顶部栏切换到内容区域。

以下是两种可行的解决办法：

方法1：通过focusProperties自定义向下导航规则 #

为滚动Column添加focusProperties配置，显式指定按下向下键时将焦点传递给容器内的第一个可焦点子元素：

fun Page2() {
    Column(
        modifier = Modifier
            .fillMaxHeight()
            .verticalScroll(rememberScrollState())
            .focusProperties {
                // 按下向下方向键时，焦点直接跳转到容器内第一个可焦点子元素
                down = { firstChild }
            }
    ) {
        Spacer(modifier = Modifier.height(100.dp))
        Text(text = "This is page number 2", fontSize = 60.sp, color = Color.Black)
        FocusablePageDivider(number = 1)
        Spacer(modifier = Modifier.height(100.dp))
        FocusablePageDivider(number = 2)
        Spacer(modifier = Modifier.height(100.dp))
        FocusablePageDivider(number = 3)
    }
}

这种方式利用Compose的焦点系统扩展能力，直接定义焦点导航的行为，让系统能正确识别滚动容器内部的可焦点元素。

方法2：结合FocusRequester指定目标焦点元素 #

如果滚动容器内第一个可焦点元素不在初始视图可见区域，或者方法1未生效，可以使用FocusRequester直接指定向下导航的目标元素：

fun Page2() {
    val focusRequester = remember { FocusRequester() }
    
    Column(
        modifier = Modifier
            .fillMaxHeight()
            .verticalScroll(rememberScrollState())
            .focusProperties {
                // 按下向下键时，聚焦到指定的元素
                down = { focusRequester }
            }
    ) {
        Spacer(modifier = Modifier.height(100.dp))
        Text(text = "This is page number 2", fontSize = 60.sp, color = Color.Black)
        FocusablePageDivider(
            number = 1,
            modifier = Modifier.focusRequester(focusRequester)
        )
        Spacer(modifier = Modifier.height(100.dp))
        FocusablePageDivider(number = 2)
        Spacer(modifier = Modifier.height(100.dp))
        FocusablePageDivider(number = 3)
    }
}

这种方式更精准，适合需要指定特定元素作为焦点跳转目标的场景。

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