Jetpack Compose中的软键盘与焦点控制

FocusRequester 与 FocusManager

在 Compose 中，可以通过 FocusRequester 与 FocusManager 这两个对象可以主动在代码中控制焦点获取和取消焦点，其中FocusRequester可以用来获取焦点，通过调用它的requestFocus()方法来实现，而 FocusManager可以用来取消焦点（以及移动焦点），通过调用它的clearFocus() 方法来实现。（不知道 Compose 官方的设计初衷是什么，这里为什么要搞两个对象。。）

@Composable
fun FocusControlExample() {
   
    var text by remember {
    mutableStateOf("") }
    var hasFocus by remember {
    mutableStateOf(false) }
    val focusRequester = remember {
    FocusRequester() }
    val focusManager = LocalFocusManager.current
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
   
        TextField(
            value = text,
            onValueChange = {
    text = it },
            Modifier
                .focusRequester(focusRequester) // 如果要代码中requestFocus()这句必须加，否则会报错
                .onFocusChanged {
    hasFocus = it.isFocused },
            placeholder = {
    Text("请输入...") },
            textStyle = TextStyle(fontSize = 20.sp),
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = Color.Transparent // 修改输入框背景色
            ),
        )
        Button(
            onClick = {
   
                if (!hasFocus) {
   
                    // 必须先调用Modifier.focusRequester()绑定FocusRequester，否则报错
                    focusRequester.requestFocus() // 主动获取焦点
                } else{
   
                    focusManager.clearFocus() // 主动清空焦点
                }
            }
        ) {
   
            Text(if (!hasFocus) "Focus" else "UnFocus")
        }
    }
}

这里有一个非常重要的点需要注意：在调用 focusRequester.requestFocus() 之前必须保证已经调用Modifier.focusRequester()为组件绑定过了FocusRequester，否则将会导致应用崩溃。

另外这里使用了 Modifier.onFocusChanged修饰符来获取焦点状态，它的lambda中可以获取到一个FocusState参数，FocusState.isFocused可以判断当前组件是否获取焦点，而FocusState.hasFocus则可以判断是否包含获取焦点的child组件。

进入页面后输入框自动弹出软键盘

既然 focusRequester 可以主动获取焦点，对于TextField组件，那么我们理所当然地可以在进入其Composable重组作用域时，就通过一个副作用Api来启动协程进行焦点获取，那么软键盘自然也就自动弹出了。

@Composable
fun AutoFocusExample() {
   
    var text by remember {
    mutableStateOf("") }
    var hasFocus by remember {
    mutableStateOf(false) }
    val focusRequester = remember {
    FocusRequester() }
    LaunchedEffect(Unit) {
   
        if (!hasFocus) focusRequester.requestFocus()
    }
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
   
        TextField(
            value = text,
            onValueChange = {
    text = it },
            modifier = Modifier
                .focusRequester(focusRequester)
                .onFocusChanged {
    hasFocus = it.isFocused },
            textStyle = TextStyle(fontSize = 20.sp),
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = Color.Transparent
            ),
        )
    }
}

捕获焦点

研究了一下，在Compose中捕获焦点跟获取到焦点是两个概念，使用还是通过 focusRequester 的两个方法 captureFocus() 和 freeFocus() ，具体区别可以看下面代码与运行效果：

@Composable
fun CaptureFocusExample() {
   
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
   
        val focusRequester = remember {
    FocusRequester() }
        var text by remember {
    mutableStateOf("") }
        TextField(
            value = text,
            onValueChange = {
    text = it },
            placeholder = {
    Text(text = "TextField1")},
            modifier = Modifier.focusRequester(focusRequester),
            textStyle = TextStyle(fontSize = 20.sp),
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = Color.Transparent
            ),
        )
        val focusRequester2 = remember {
    FocusRequester() }
        var value by remember {
    mutableStateOf("") }
        var borderColor by remember {
    mutableStateOf(Color.Transparent) }
        TextField(
            value = value,
            onValueChange = {
   
                value = it.apply {
   
                    if (length > 5) 
                        focusRequester2.captureFocus() //捕获焦点
                    else
                        focusRequester2.freeFocus() // 释放焦点
                }
            },
            placeholder = {
    Text(text = "TextField2")},
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = Color.Transparent
            ),
            modifier = Modifier
                .border(2.dp, borderColor)
                .focusRequester(focusRequester2)
                .onFocusChanged {
   
                    borderColor = if (it.isCaptured) Color.Red else Color.Transparent
                }
        )
        val focusManager = LocalFocusManager.current
        Button(onClick = {
    focusManager.clearFocus() }) {
    Text("clearFocus") }
        Button(onClick = {
    focusRequester.requestFocus() }) {
    Text("TextField1 requestFocus") }
    }
}

可以看到在捕获焦点以后，任何其他组件均不能获取焦点（包括clearFocus()也不会起作用），直到当前组件调用freeFocus()释放焦点。 相当于当前组件锁定了焦点模式。

这里为每个TextField组件都绑定了一个 FocusRequester 对象，每个 FocusRequester 对象控制各自绑定的组件的焦点获取。而 FocusManager 使用一个就可以了，因此 FocusManager的获取是通过 LocalFocusManager.current 它获取到的是一个范围内的单例。

通过 SoftwareKeyboardController 控制软键盘显示与隐藏

前面通过 FocusManager.clearFocus() 方法可以取消组件的焦点，对于TextField组件，如果失去焦点，那么软键盘也会自动隐藏。这里 Compose 中还有另一种方式来专门控制键盘的显示与隐藏，就是通过SoftwareKeyboardController 来实现。

@OptIn(ExperimentalComposeUiApi::class, ExperimentalLayoutApi::class)
@Composable
fun KeyboardControllerExample() {
   
    var text by remember {
    mutableStateOf("") }
    var hasFocus by remember {
    mutableStateOf(false) }
    val focusRequester = remember {
    FocusRequester() }
    val keyboardController = LocalSoftwareKeyboardController.current
    val isImeVisible = WindowInsets.isImeVisible
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
   
        TextField(
            value = text,
            onValueChange = {
    text = it },
            Modifier
                .