Jetpack Compose Android页面返回后焦点无法正常恢复问题排查

一、核心原因分析 #

1. 状态未跨导航保留
   当前使用remember保存selectedTabIndex和focusedTabIndex，但remember仅在组件未被销毁时保留状态。当离开页面后返回，组件会被重新创建，状态会重置为初始值，导致焦点无法对应到之前选中的标签。

2. 缺少显式焦点请求
   Compose 默认不会在页面返回时自动恢复之前的焦点位置，即使状态已保留，也需要主动向目标标签发起焦点请求。

3. FocusRestorer 的局限性
   focusRestorer仅能在同一组件树的生命周期内恢复焦点。如果组件因导航被销毁重建，它无法保留之前的焦点状态，因此单独使用它不足以解决跨导航的焦点恢复问题。

4. 父布局焦点干扰
   调用处的onFocusChanged监听可能导致父布局在返回时优先获取焦点，虽然它不会消耗焦点，但如果没有主动将焦点转移到标签，标签无法自动获得焦点。

二、具体解决方案 #

1. 用 rememberSaveable 保留状态

将selectedTabIndex和focusedTabIndex改为rememberSaveable，确保状态在导航、配置变化甚至进程重启后仍能保留：

var selectedTabIndex by rememberSaveable { mutableIntStateOf(0) }
var focusedTabIndex by rememberSaveable { mutableIntStateOf(0) }

2. 显式请求焦点

为每个标签添加FocusRequester，在组件重建后主动请求焦点到之前选中的标签：

@Composable
fun TabItems(
    viewableViewState: ViewableViewState.Ready,
    onPlayClicked: (viewableInterface: ViewableInterface) -> Unit,
    modifier: Modifier = Modifier,
) {
    var selectedTabIndex by rememberSaveable { mutableIntStateOf(0) }
    var focusedTabIndex by rememberSaveable { mutableIntStateOf(0) }

    val tabItems = viewableViewState.viewable?.let { getTabItems(it) } ?: emptyList()
    val context = LocalContext.current
    val primaryColor = Color(context.partnerTheme.primaryBackground)
    
    // 为每个标签创建焦点请求器
    val focusRequesters = remember(tabItems.size) {
        List(tabItems.size) { FocusRequester() }
    }

    // 当状态恢复后，主动请求焦点到之前的标签
    LaunchedEffect(focusedTabIndex, tabItems.size) {
        if (focusedTabIndex < tabItems.size) {
            focusRequesters[focusedTabIndex].requestFocus()
        }
    }

    Column(
        modifier = modifier
            .animateContentSize()
            .fillMaxHeight(),
    ) {
        TabRow(
            selectedTabIndex = selectedTabIndex,
            containerColor = Color.Transparent,
            modifier = Modifier.padding(start = 30.dp, end = 16.dp),
            contentColor = primaryColor,
            separator = { Spacer(modifier = Modifier.width(24.dp)) },
            indicator = { _, _ -> },
        ) {
            tabItems.forEachIndexed { index, item ->
                Tab(
                    selected = selectedTabIndex == index,
                    onClick = { selectedTabIndex = index },
                    modifier = Modifier
                        .focusRequester(focusRequesters[index]) // 绑定焦点请求器
                        .focusRestorer(),
                    content = {
                        Text(
                            text = stringResource(id = item.textResourceId),
                            maxLines = 2,
                            style = typography.body.copy(
                                fontWeight = if (selectedTabIndex == index) FontWeight.Bold else FontWeight.Normal,
                                textDecoration = if (focusedTabIndex == index) TextDecoration.Underline else TextDecoration.None,
                                color = Color(context.partnerTheme.themePrimaryTint0),
                            ),
                        )
                    },
                    onFocus = {
                        focusedTabIndex = index
                    },
                )
            }
        }
        // 剩余内容不变...
    }
}

3. 优化父布局焦点逻辑（可选）

如果父布局的onFocusChanged仍可能干扰焦点，可以调整逻辑，确保在父布局获得焦点时，主动将焦点转移到标签：

// 调用处修改
TabItems(
    viewableViewState = uiState,
    modifier = Modifier
        .onFocusChanged { focusState ->
            if (focusState.hasFocus) {
                collapseMovieDetails = true
                // 可选：如果需要，主动触发焦点转移到标签
                // 可以通过回调让TabItems内部发起焦点请求
            }
        },
    onPlayClicked = { viewable ->
        context.startActivity(
            PlayerActivity.newIntent(
                context = context,
                viewable = viewable,
            ),
        )
    },
)

三、验证要点 #

• 确认返回页面后，selectedTabIndex和focusedTabIndex的值是之前选中的索引（可通过日志打印验证）。
• 检查LaunchedEffect是否在组件重建后正确触发焦点请求。
• 确保没有其他焦点able元素在页面返回时优先获取焦点（如顶部导航栏按钮等）。

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