Jetpack Compose中TextField父布局可点击时，回车键触发父onClick问题

问题描述 #

父布局Box添加了Modifier.clickable修饰符，子元素为TextField。按下硬件键盘的Enter/Return键时，TextField会正常换行，但同时会触发父布局的onClick事件。

补充背景：设置可点击父布局是为了搭配Modifier.clearFocusOnClick()，实现用户点击文本框或其他可点击子元素外的区域时，清除焦点并隐藏键盘。另外，带有Modifier.clickable的子元素表现正常，不会将点击事件传递给父布局。

代码示例：

Box(
    Modifier.clickable {
        Log.i("bullsh#t", "I've been clicked")
    }
) {
    var text by remember { mutableStateOf("") }

    TextField(value = text, onValueChange = { text = it })
}

问题原因 #

这是因为TextField在处理Enter键时，除了执行换行逻辑，还会向父布局分发一个模拟的点击事件。而TextField本身没有设置clickable修饰符，无法消费这个事件，导致事件冒泡到父布局的clickable修饰符被触发。

快速解决方法 #

有两种简单的处理方式：

方法一：给TextField添加clickable修饰符 #

给TextField添加空实现的Modifier.clickable，让它消费点击事件，阻止事件冒泡到父布局：

Box(
    Modifier.clickable {
        Log.i("bullsh#t", "I've been clicked")
    }
) {
    var text by remember { mutableStateOf("") }

    TextField(
        value = text,
        onValueChange = { text = it },
        modifier = Modifier.clickable { } // 添加空实现的clickable
    )
}

方法二：在父布局的clickable中判断焦点 #

利用LocalFocusManager判断当前焦点是否在TextField上，仅当焦点不在文本框时才执行父布局的点击逻辑：

val focusManager = LocalFocusManager.current

Box(
    Modifier.clickable {
        // 若焦点不在TextField上，才执行逻辑
        if (!focusManager.isFocused(focusManager.primaryFocus)) {
            Log.i("bullsh#t", "I've been clicked")
        }
    }
) {
    var text by remember { mutableStateOf("") }

    TextField(value = text, onValueChange = { text = it })
}

注：如果核心需求是点击外部区域清除焦点，推荐结合Modifier.clearFocusOnClick()使用第二种方法，既能保留原有焦点清除功能，又能避免Enter键误触发父布局事件。

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