Jetpack Compose 中如何为TextField设置焦点获取监听事件

问题原因 #

TextField 内部已经实现了点击事件逻辑用于触发获焦、弹出系统键盘等操作，会消费掉触摸事件，外层附加的clickable修饰符默认无法接收到被消费的事件，因此回调不会执行。

实现方案 #

下面提供两种适配不同场景的实现方式：

方案1：监听焦点状态变化（推荐） #

该方案可以覆盖所有输入框获焦的场景，包括用户点击、物理按键切换焦点、代码主动请求获焦等，适配绝大多数业务需求。
实现代码如下：

TextField(
    value = yourInputValue,
    onValueChange = { yourInputValue = it },
    modifier = Modifier
        // 添加焦点变化监听
        .onFocusChanged { focusState ->
            if (focusState.isFocused) {
                // 输入框获得焦点时执行你的逻辑
                shouldShowSearchKeyBoard.value = true
            }
        }
)

方案2：仅监听用户点击输入框的操作 #

如果你只需要捕获用户主动点击输入框的事件，排除其他获焦场景，可以通过InteractionSource监听输入框的交互事件：
实现代码如下：

@Composable
fun YourSearchTextField() {
    val yourInputValue by remember { mutableStateOf("") }
    // 1. 创建MutableInteractionSource实例
    val interactionSource = remember { MutableInteractionSource() }

    // 2. 监听交互事件
    LaunchedEffect(interactionSource) {
        interactionSource.interactions.collect { interaction ->
            // 捕获用户按下输入框的事件
            if (interaction is PressInteraction.Press) {
                shouldShowSearchKeyBoard.value = true
            }
        }
    }

    // 3. 将interactionSource传入TextField
    TextField(
        value = yourInputValue,
        onValueChange = { yourInputValue = it },
        interactionSource = interactionSource
    )
}

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