Jetpack Compose：LazyRow中如何监听每项的无障碍焦点变化？

问题根因拆解 #

• 初始实现中onFocusChanged仅初始化触发：LazyRow的item未正确设置焦点目标，且语义修饰符干扰了焦点事件的传递路径
• 添加focusTarget后状态全为Inactive：Modifier顺序错误，semantics(mergeDescendants = true)合并了后代语义导致焦点状态无法被正确识别；traversalIndex = -1f直接打乱了系统默认的焦点遍历顺序
• 索引与实际项不匹配：LazyRow的item复用机制下，全局协程（GlobalScope）和错误的语义设置导致索引关联逻辑混乱
• 焦点切换后元素不居中：无障碍模式下焦点事件未触发正确的滚动对齐逻辑，rememberSnapFlingBehavior未适配无障碍场景的焦点触发时机

修正方案 #

1. 调整Modifier顺序与语义配置 #

焦点相关修饰符（focusTarget、onFocusChanged）必须放在语义修饰符之前，避免语义合并覆盖焦点状态；移除traversalIndex = -1f，保证系统默认的焦点遍历逻辑正常运行。

2. 替换全局协程作用域 #

用rememberCoroutineScope()替代GlobalScope，让协程与组件生命周期绑定，避免内存泄漏和生命周期不匹配问题。

3. 优化焦点事件与滚动逻辑 #

在元素获取焦点时，立即更新选中索引；仅当列表未处于滚动状态时，触发平滑滚动并确保项居中显示。

4. 精简无障碍语义设置 #

仅在必要时合并后代语义，避免过度合并干扰焦点识别；可添加针对性的内容描述提升无障碍体验。

修正后的代码示例 #

@Composable
fun EpisodeLazyRow(
    episodes: List<EpisodeItem>,
    selectedEpisodeIndex: Int,
    onSelectedIndexChange: (Int) -> Unit,
    modifier: Modifier = Modifier,
) {
    val listState = rememberLazyListState()
    val coroutineScope = rememberCoroutineScope()
    val CARD_KEY = "episode_card_" // 确保唯一标识前缀

    LazyRow(
        state = listState,
        modifier = modifier,
        flingBehavior = rememberSnapFlingBehavior(lazyListState = listState),
        horizontalArrangement = Arrangement.Center // 默认让项居中对齐
    ) {
        itemsIndexed(items = episodes, key = { index, _ ->
            "$CARD_KEY$index"
        }) { index, item ->
            CustomCard(
                episode = item.episode,
                modifier = Modifier
                    .wrapContentWidth()
                    .background(BrandedTheme._ui_core__bottomsheet__backgroundColor)
                    .focusTarget() // 焦点目标放在最前面，确保能捕获焦点事件
                    .onFocusChanged { focusState ->
                        if (focusState.isFocused) {
                            // 更新选中索引
                            onSelectedIndexChange(index)
                            // 列表未滚动时触发居中滚动
                            if (!listState.isScrollInProgress) {
                                coroutineScope.launch {
                                    // 计算偏移量，确保焦点项居中显示
                                    val viewportWidth = listState.layoutInfo.viewportSize.width
                                    val itemWidth = item.episode.cardWidth // 需确保能获取到项的宽度
                                    val scrollOffset = (viewportWidth / 2) - (itemWidth / 2)
                                    
                                    listState.animateScrollToItem(
                                        index = index,
                                        scrollOffset = scrollOffset
                                    )
                                }
                            }
                        }
                    }
                    .wrapContentHeight()
                    .semantics(mergeDescendants = true) {
                        isTraversalGroup = true
                        // 可添加无障碍内容描述
                        contentDescription = "第${index + 1}集：${item.episode.title}"
                    },
                index = index
            )
        }
    }
}

额外注意事项 #

• 如果CustomCard内部包含可焦点元素，需确保内部元素的焦点事件不会向上冒泡，或在语义配置中明确合并规则
• 若rememberSnapFlingBehavior在无障碍模式下仍不生效，可尝试直接通过计算偏移量的方式强制让焦点项居中
• 测试时需开启系统无障碍模式（如TalkBack），验证焦点遍历和滚动逻辑是否符合预期

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