如何在Jetpack Compose中确定哪个元素获得了焦点？

针对自定义Composable元素获焦后无高亮、无法直观查看焦点状态的问题，可通过以下几种方案解决：

1. 全局添加焦点指示器 #

利用Compose的FocusManager和SideEffect全局监听焦点变化，为当前获焦元素添加统一的高亮装饰：

@Composable
fun FocusIndicatorOverlay() {
    val focusManager = LocalFocusManager.current
    val currentFocusedNode = remember { mutableStateOf<FocusRequester?>(null) }

    SideEffect {
        currentFocusedNode.value = focusManager.focusedChild?.findParentFocusRequester()
    }

    currentFocusedNode.value?.let { requester ->
        val layoutInfo = requester.parentLayoutInfo
        Box(
            modifier = Modifier
                .offset(layoutInfo.position.x.dp, layoutInfo.position.y.dp)
                .size(layoutInfo.size.width.dp, layoutInfo.size.height.dp)
                .border(2.dp, Color.Blue, RoundedCornerShape(4.dp))
                .pointerInput(Unit) {}
        )
    }
}

在App根Composable中引入该Overlay即可全局生效：

@Composable
fun MyApp() {
    MaterialTheme {
        Box(modifier = Modifier.fillMaxSize()) {
            MainContent()
            FocusIndicatorOverlay()
        }
    }
}

2. 为自定义Composable统一添加焦点修饰符 #

封装通用的焦点高亮修饰符，让所有自定义组件复用，自动处理焦点状态：

fun Modifier.focusHighlight(): Modifier = this
    .onFocusChanged { state ->
        val borderColor = if (state.isFocused) Color.Blue else Color.Transparent
        this.border(2.dp, borderColor, RoundedCornerShape(4.dp))
    }
    .focusable()

在自定义组件中直接使用：

@Composable
fun CustomButton(onClick: () -> Unit) {
    Box(
        modifier = Modifier
            .focusHighlight()
            .clickable(onClick = onClick)
            .padding(16.dp),
        contentAlignment = Alignment.Center
    ) {
        Text("自定义按钮")
    }
}

3. 使用Accessibility Inspector辅助排查 #

打开Android Studio的Accessibility Inspector（路径：Tools → Accessibility → Accessibility Inspector），它能实时显示当前获焦元素的状态和信息，即使Composable未显式暴露focus参数也能正常检测，适合临时调试。

4. 自定义焦点回调追踪 #

在根布局中添加全局焦点监听，通过Log输出获焦元素的标识，方便定位问题：

@Composable
fun MainContent() {
    val focusManager = LocalFocusManager.current
    DisposableEffect(Unit) {
        val listener = FocusChangeListener { focusedNode ->
            Log.d("FocusTracker", "当前获焦元素ID: ${focusedNode?.layoutNode?.id}")
            focusedNode?.layoutNode?.tags?.forEach { key, value ->
                Log.d("FocusTracker", "元素Tag: $key = $value")
            }
        }
        focusManager.addFocusChangeListener(listener)
        onDispose {
            focusManager.removeFocusChangeListener(listener)
        }
    }

    // 应用布局内容
}

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