Android TV Jetpack Compose：从ModalNavigationDrawer切换焦点到LazyColumn

Box与LazyColumn的焦点行为差异 #

• Box是静态布局：所有子组件的布局信息在首次渲染时就完全确定，系统能精准识别各个可聚焦元素的位置关系。当焦点在抽屉的Home项时，按下右键，系统能立刻定位到右侧Box内的可聚焦按钮，焦点转移后，ModalNavigationDrawer检测到焦点离开抽屉区域，自动关闭抽屉，符合预期。
• LazyColumn是动态滚动容器：它采用按需加载机制，初始阶段仅完成容器本身的布局，子项的布局会延迟执行；同时LazyColumn默认的焦点逻辑偏向垂直滚动场景，TV端的横向焦点遍历优先级未被正确处理。这就导致按下右键时，系统无法识别到右侧LazyColumn内的可聚焦元素，焦点始终停留在抽屉的Home项，抽屉自然不会关闭。

1. 强制LazyColumn子项的焦点可访问 #

通过FocusRequester在页面加载完成后，主动将焦点定向到LazyColumn的第一个可聚焦按钮：

// 在Home页面中
val itemFocusRequester = remember { FocusRequester() }

LazyColumn(
    modifier = Modifier.fillMaxSize()
) {
    item {
        // 你的自定义项，将焦点请求器绑定到第一个可聚焦按钮
        CustomItem(
            firstButtonFocusRequester = itemFocusRequester,
            // 其他参数
        )
    }
    // 其他列表项
}

// 等待布局完成后请求焦点
LaunchedEffect(Unit) {
    itemFocusRequester.requestFocus()
}

// 自定义项组件
@Composable
fun CustomItem(firstButtonFocusRequester: FocusRequester) {
    Box(modifier = Modifier.fillMaxWidth()) {
        // 不可聚焦的背景图
        Image(
            painter = painterResource(id = R.drawable.bg),
            contentDescription = null,
            modifier = Modifier.fillMaxSize().focusable(false)
        )
        Row(modifier = Modifier.align(Alignment.Center)) {
            Button(
                onClick = { /* 按钮逻辑 */ },
                modifier = Modifier
                    .focusRequester(firstButtonFocusRequester)
                    .focusable()
            ) {
                Text("按钮1")
            }
            Button(
                onClick = { /* 按钮逻辑 */ },
                modifier = Modifier.focusable()
            ) {
                Text("按钮2")
            }
        }
    }
}

2. 手动处理抽屉关闭与焦点转移 #

如果上述方法效果不佳，可以直接在抽屉的Home项上监听遥控器右键事件，手动关闭抽屉并转移焦点：

// 在抽屉内容的Home项中
val drawerState = rememberDrawerState(initialValue = DrawerValue.Open)
val itemFocusRequester = remember { FocusRequester() }
val coroutineScope = rememberCoroutineScope()

Text(
    text = "Home",
    modifier = Modifier
        .focusable()
        .clickable { /* 切换到Home页面的逻辑 */ }
        .onKeyEvent { event ->
            if (event.type == KeyEventType.KeyDown && event.key == Key.Right) {
                coroutineScope.launch {
                    // 关闭抽屉
                    drawerState.close()
                    // 延迟确保抽屉动画完成，再请求焦点
                    delay(100)
                    itemFocusRequester.requestFocus()
                }
                true // 消费该事件
            } else {
                false
            }
        }
)

注意：itemFocusRequester需要和Home页面中LazyColumn子项的焦点请求器保持一致，可以通过状态提升或参数传递实现。

3. 调整LazyColumn的焦点遍历优先级 #

给LazyColumn设置横向焦点遍历的优先级，确保系统优先处理横向焦点切换：

LazyColumn(
    modifier = Modifier
        .fillMaxSize()
        .focusProperties {
            // 设置右侧焦点目标为子项的焦点请求器
            right = itemFocusRequester
        }
) {
    // ...列表项
}

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