Jetpack Compose点击空白隐藏键盘 多TextField场景黑屏问题

你之前在根布局直接挂载detectTapGestures监听点击清焦点的写法存在两个核心问题，直接导致多输入框场景下的黑屏异常：

• 手势拦截逻辑优先级不对：父布局的detectTapGestures会在事件传递给子组件（即TextField）之前捕获点击事件，点击输入框时会先触发父布局的clearFocus()清除现有焦点、触发系统隐藏软键盘，紧接着被点击的TextField又会主动请求焦点、唤起软键盘。输入框越多，这种“清焦点-抢焦点-隐藏键盘-唤起键盘”的重复操作越容易触发软键盘窗口和界面渲染的状态不同步，最终出现底部黑屏的渲染bug。
• 手势监听没有做事件消费判断：不管点击位置是不是在输入框范围内，都会强制触发清焦点，完全打断子组件正常的焦点请求流程，输入框数量上来之后冲突概率会指数级上升。

不要直接用detectTapGestures做全局监听，改为在手势分发阶段判断事件是否被子组件消费，只有点击事件没被输入框等可交互组件捕获时，才触发清焦点逻辑，从根源上避免焦点冲突。
首先定义可复用的修饰符扩展：

fun Modifier.clearFocusOnTapOutside(): Modifier = composed {
    val focusManager = LocalFocusManager.current
    pointerInput(Unit) {
        awaitPointerEventScope {
            while (true) {
                val downEvent = awaitPointerEvent(PointerEventPass.Initial)
                val downChange = downEvent.changes.firstOrNull { it.pressed && !it.isConsumed } ?: continue
                val pointerId = downChange.id
                
                // 等待点击抬起，排除长按、滑动误触发
                val upChange = withTimeoutOrNull(viewConfiguration.longPressTimeoutMillis) {
                    var currentChange = downChange
                    while (currentChange.pressed) {
                        val currentEvent = awaitPointerEvent(PointerEventPass.Initial)
                        currentChange = currentEvent.changes.first { it.id == pointerId }
                    }
                    currentChange
                } ?: continue

                // 事件全程未被子组件消费，说明点击的是空白区域，再执行清焦点
                if (!upChange.isConsumed) {
                    focusManager.clearFocus()
                }
            }
        }
    }
}

替换根布局原来的手势监听逻辑即可，内部输入框代码不需要做任何修改：

@Composable
fun KeyboardSample(){
    Column(
        modifier = Modifier
            .fillMaxSize()
            .clearFocusOnTapOutside() // 替换原有pointerInput+detectTapGestures逻辑
            .padding(start = 16.dp, end = 16.dp),
    ) {
        var name by rememberSaveable { mutableStateOf("") }
        val updateName = { _name : String ->
            name = _name
        }

        var amount by rememberSaveable { mutableStateOf("") }
        val updateAmount = { _amount : String ->
            amount = _amount
        }

        TextFiledsToExperiment(
            name = name,
            updateName = updateName,
            amount = amount,
            updateAmount = updateAmount
        )
    }
}

• 如果你使用的是2023年10月之后发布的Compose稳定版（BOM版本号2023.10.01及以上），框架已经内置了点击输入框外自动清理焦点的默认行为，不需要额外加手势监听，只要在Manifest里给对应Activity配置android:windowSoftInputMode="adjustResize"，就能直接实现点击空白收键盘的效果，也不会出现渲染异常。
• 手势监听只需要加在页面最外层的根容器上即可，不要给每个输入框单独加，也不要在多层嵌套布局里重复加，否则还是会出现焦点冲突。如果页面是滚动列表（比如用LazyColumn承载几十个输入框的表单页），直接给LazyColumn加修饰符即可，不会出现滑动误触发清焦点的问题。

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