KMP Compose中iOS数字键盘关闭按钮添加方法求助

由于iOS原生数字键盘默认不带关闭按钮，而KMP Compose本身没有提供直接配置的API，我们可以通过跨平台expect/actual机制结合iOS原生UIKit能力来实现这个需求，具体步骤如下：

1. 定义跨平台接口 #

在common模块中创建工具类，定义两个跨平台函数：一个用于给TextField添加iOS键盘关闭按钮的Modifier，另一个用于隐藏键盘。

// commonMain/kotlin/your/package/KeyboardUtils.kt
import androidx.compose.ui.Modifier

expect fun Modifier.iOSNumberKeyboardDoneButton(onClick: () -> Unit): Modifier
expect fun hideKeyboard()

2. 实现iOS端逻辑 #

在iOS模块中实现上述expect函数，利用UIKit的inputAccessoryView为数字键盘添加带“完成”按钮的工具栏，并实现键盘隐藏逻辑。

// iosMain/kotlin/your/package/KeyboardUtils.kt
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalView
import platform.UIKit.*
import platform.darwin.NSLayoutAttributeBottom
import platform.darwin.NSLayoutAttributeLeft
import platform.darwin.NSLayoutAttributeRight
import platform.darwin.NSLayoutRelationEqual

actual fun Modifier.iOSNumberKeyboardDoneButton(onClick: () -> Unit): Modifier {
    return this.then(Modifier.composed {
        val view = LocalView.current
        androidx.compose.ui.viewinterop.AndroidView(factory = { _ ->
            object : UIView() {
                override fun didMoveToWindow() {
                    super.didMoveToWindow()
                    // 获取当前正在编辑的TextField
                    val textField = view.findFirstResponder() as? UITextField ?: return
                    textField.keyboardType = UIKeyboardTypeNumberPad

                    // 创建工具栏
                    val toolbar = UIToolbar().apply {
                        barStyle = UIToolbarStyleDefault
                        sizeToFit()
                        // 添加“完成”按钮
                        val doneButton = UIButton(type = UIButtonTypeSystem).apply {
                            setTitle("完成", forState = UIControlStateNormal)
                            setTitleColor(UIColor.systemBlueColor(), forState = UIControlStateNormal)
                            addTarget(
                                target = onClick,
                                action = "invoke",
                                forControlEvents = UIControlEventTouchUpInside
                            )
                        }
                        // 添加弹性空间，让按钮靠右
                        val flexibleSpace = UIBarButtonItem(
                            UIBarButtonSystemItemFlexibleSpace,
                            null,
                            null
                        )
                        setItems(listOf(flexibleSpace, doneButton), animated = false)
                    }

                    // 将工具栏设置为键盘的附属视图
                    textField.inputAccessoryView = toolbar
                }
            }
        })
    })
}

actual fun hideKeyboard() {
    // 调用iOS原生方法关闭键盘
    UIApplication.sharedApplication.keyWindow?.endEditing(true)
}

// 扩展函数：递归查找当前第一响应者（正在编辑的输入框）
private fun UIView.findFirstResponder(): UIView? {
    if (isFirstResponder) return this
    subviews.forEach { subview ->
        subview.findFirstResponder()?.let { return it }
    }
    return null
}

3. 实现Android端逻辑 #

Android端键盘自带关闭按钮，因此只需要实现hideKeyboard函数即可，iOSNumberKeyboardDoneButton可以直接返回原Modifier不做处理。

// androidMain/kotlin/your/package/KeyboardUtils.kt
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalFocusManager
import android.app.Activity
import android.view.inputmethod.InputMethodManager

actual fun Modifier.iOSNumberKeyboardDoneButton(onClick: () -> Unit): Modifier = this

actual fun hideKeyboard() {
    val focusManager = LocalFocusManager.current
    focusManager.clearFocus()
    
    // 备选方案：通过Context隐藏键盘
    val context = LocalContext.current
    val inputMethodManager = context.getSystemService(InputMethodManager::class.java)
    inputMethodManager.hideSoftInputFromWindow(
        (context as Activity).currentFocus?.windowToken,
        0
    )
}

4. 在Compose中使用 #

在你的数字输入TextField上应用这个Modifier，点击“完成”按钮即可关闭键盘。

// commonMain/kotlin/your/package/NumberInputScreen.kt
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.TextField
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.material.Text

@Composable
fun NumberInputScreen() {
    val numberValue = remember { mutableStateOf("") }
    
    TextField(
        value = numberValue.value,
        onValueChange = { numberValue.value = it },
        keyboardOptions = KeyboardOptions.Default.copy(keyboardType = androidx.compose.ui.text.input.KeyboardType.Number),
        modifier = Modifier.iOSNumberKeyboardDoneButton {
            hideKeyboard()
        },
        label = { Text("请输入数字") }
    )
}

说明 #

• 该方案通过iOS原生UIKit API为数字键盘添加了自定义工具栏，完全适配KMP跨平台场景。
• 你可以根据需求调整“完成”按钮的文字、颜色、位置等样式。
• Android端不受影响，保留原生键盘的关闭按钮逻辑。

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