Jetpack Compose：如何实现TextField获焦时唤起ModalSheetLayout而非键盘

这个需求完全可行，核心思路是拦截TextField的系统键盘唤起逻辑，同时在焦点变化时触发自定义ModalSheet的显示，以下是具体实现步骤：

1. 准备状态与焦点管理 #

先定义焦点请求器、ModalSheet的状态，以及控制Sheet显示的状态变量：

val focusRequester = remember { FocusRequester() }
val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
val scope = rememberCoroutineScope()
var showCustomSheet by remember { mutableStateOf(false) }

2. 自定义TextField，拦截键盘唤起 #

针对需要替换键盘的TextField，通过配置禁用默认IME动作，同时监听焦点变化触发Sheet：

TextField(
    value = customText,
    onValueChange = { customText = it },
    label = { Text("点击唤起自定义面板") },
    modifier = Modifier
        .fillMaxWidth()
        .focusRequester(focusRequester)
        .onFocusChanged { focusState ->
            if (focusState.isFocused) {
                // 获焦时强制隐藏系统键盘（防止意外弹出）
                LocalSoftwareKeyboardController.current?.hide()
                // 启动协程显示自定义Sheet
                scope.launch {
                    showCustomSheet = true
                    sheetState.show()
                }
            }
        },
    // 禁用系统键盘的IME动作，避免主动唤起
    keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.None),
    // 空实现键盘动作，阻断默认输入逻辑
    keyboardActions = KeyboardActions(onAny = {})
)

3. 集成ModalBottomSheetLayout #

将页面内容包裹在ModalBottomSheetLayout中，自定义Sheet的布局：

ModalBottomSheetLayout(
    sheetState = sheetState,
    sheetContent = {
        // 这里替换成你的自定义布局，比如选择器、自定义输入组件等
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp)
        ) {
            Text("自定义输入面板", fontSize = 18.sp, fontWeight = FontWeight.Bold)
            Spacer(modifier = Modifier.height(16.dp))
            
            // 示例：添加自定义输入按钮
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceAround
            ) {
                Button(onClick = { customText += "X" }) { Text("X") }
                Button(onClick = { customText += "Y" }) { Text("Y") }
                Button(onClick = { customText += "Z" }) { Text("Z") }
            }
            
            Spacer(modifier = Modifier.height(24.dp))
            Button(
                onClick = {
                    scope.launch {
                        sheetState.hide()
                        showCustomSheet = false
                        // 可选：主动释放TextField焦点，避免重复触发
                        focusRequester.freeFocus()
                    }
                },
                modifier = Modifier.align(Alignment.End)
            ) { Text("完成") }
        }
    },
    // Sheet被外部点击关闭时同步状态
    onDismissRequest = {
        showCustomSheet = false
        focusRequester.freeFocus()
    }
) {
    // 页面主内容，包含所有TextField
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // 正常唤起系统键盘的TextField
        TextField(
            value = normalText,
            onValueChange = { normalText = it },
            label = { Text("普通输入框") },
            modifier = Modifier.fillMaxWidth()
        )
        Spacer(modifier = Modifier.height(16.dp))
        // 绑定自定义Sheet的TextField（代码同步骤2）
        TextField(
            value = customText,
            onValueChange = { customText = it },
            label = { Text("点击唤起自定义面板") },
            modifier = Modifier
                .fillMaxWidth()
                .focusRequester(focusRequester)
                .onFocusChanged { focusState ->
                    if (focusState.isFocused) {
                        LocalSoftwareKeyboardController.current?.hide()
                        scope.launch {
                            showCustomSheet = true
                            sheetState.show()
                        }
                    }
                },
            keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.None),
            keyboardActions = KeyboardActions(onAny = {})
        )
    }
}

关键细节说明 #

• 彻底禁用键盘：通过keyboardOptions设置imeAction = ImeAction.None，配合空实现的keyboardActions，从根源上阻止系统唤起键盘；同时在获焦时调用hide()确保键盘不会意外弹出。
• 焦点与Sheet联动：使用FocusRequester精准控制TextField的焦点状态，在Sheet关闭时主动释放焦点，避免重复触发Sheet显示。
• 状态同步：通过showCustomSheet变量与sheetState的show()/hide()方法联动，确保Sheet的显示状态与焦点变化完全匹配。

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