Jetpack Compose导航时Talkback未自动聚焦屏幕顶部问题求助

使用Jetpack Compose实现页面导航时，Talkback焦点未按预期移动到新屏幕顶部，而是停留在与前一屏幕位置相近的区域。比如点击屏幕中部按钮完成导航后，新屏幕加载时焦点会停留在中部，而非顶部。已尝试用FocusManager清除焦点、FocusRequester请求焦点，但都没解决问题。

问题页面代码 #

@Composable
private fun IncidentScreen(
    viewState: IncidentViewModel.ViewState,
    onBackClicked: () -> Unit,
    onMoreInfoClicked: () -> Unit,
    onWebViewDismissed: () -> Unit,
) {
    val focusManager = LocalFocusManager.current
    val focusRequester = remember { FocusRequester() }

    LaunchedEffect(Unit) {
        focusManager.clearFocus(true)
        focusRequester.freeFocus()
        focusRequester.requestFocus()
    }

    BaseScreen(
        title = viewState.incidentType,
        navigationIcon = {
            NavigationBackButton(
                onClick = onBackClicked,
                modifier = Modifier.focusTarget().focusRequester(focusRequester).focusable()
            )
        }
    ) { paddingValues ->
        LazyColumn(Modifier.fillMaxWidth()) {
            item {
                MapPreview(
                    locationOnMap = viewState.locationOnMap,
                    severity = viewState.severity,
                    category = viewState.category
                )
            }
            item {
                IncidentHeroBar(
                    incidentType = viewState.incidentType,
                    incidentName = viewState.incidentName,
                    incidentDistance = viewState.distanceUser,
                    incidentDistanceFromWatchZone = viewState.distanceFromClosestWatchZone,
                    severity = viewState.severity,
                    category = viewState.category
                )
            }
            items(viewState.incidentInfoItems) {
                Box(
                    Modifier
                        .fillMaxWidth()
                        .padding(horizontal = 16.dp)
                ) {
                    Column {
                        Spacer(modifier = Modifier.height(16.dp))
                        IncidentListItem(
                            title = stringResource(id = it.title.title_res),
                            body = it.body
                        )
                        Spacer(modifier = Modifier.height(8.dp))
                        HorizontalDivider()
                    }
                }
            }
            item {
                SecondaryButton(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(20.dp),
                    text = stringResource(id = R.string.btn_incident_more_info),
                    onClick = { onMoreInfoClicked.invoke() }
                )
            }
        }
        FadedVisibility(
            visible = viewState.isLoading
        ) {
            Box(
                contentAlignment = Alignment.Center,
                modifier = Modifier
                    .background(MaterialTheme.colorScheme.scrim.copy(alpha = 0.32f))
                    .padding(paddingValues)
                    .fillMaxSize()
            ) {
                CircularProgressIndicator()
            }
        }
    }
}

已尝试的无效代码 #

LaunchedEffect(Unit) {
    focusManager.clearFocus(true)
    focusRequester.freeFocus()
    focusRequester.requestFocus()
}

解决方案 #

1. 绑定页面就绪状态执行焦点请求
   原代码中LaunchedEffect(Unit)仅在组件首次组合时执行，可能早于页面完全就绪或系统自动恢复焦点的时机。改为绑定viewState，并等待UI布局完成后再请求焦点：

   val focusManager = LocalFocusManager.current
   val focusRequester = remember { FocusRequester() }
   
   LaunchedEffect(viewState) {
       // 等待下一帧确保UI布局完成
       withFrameMillis {
           focusManager.clearFocus(force = true)
           focusRequester.requestFocus()
       }
   }
   

2. 优化焦点目标的Modifier顺序与语义
   调整NavigationBackButton的Modifier顺序，focusRequester需在focusable之前；同时移除冗余的focusTarget，并添加明确的可访问性语义：

   NavigationBackButton(
       onClick = onBackClicked,
       modifier = Modifier
           .focusRequester(focusRequester)
           .focusable()
           .semantics {
               contentDescription = stringResource(R.string.back_button)
           }
   )
   

3. 禁用导航时的焦点自动恢复
   在触发导航时，通过NavOptions关闭状态恢复，避免系统自动将焦点定位到位置相近的元素：

   navController.navigate("incident_screen") {
       restoreState = false
   }
   

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