21. TextField光标位置 和键盘事件

项目地址

主要用到TextFieldValue 和键盘的监听

达到键盘顶起来一部分布局的效果

@RequiresApi(Build.VERSION_CODES.R)
@ExperimentalComposeUiApi
@Composable
fun KeyboardPage(navCtrl: NavHostController, title: String) {
    val context = LocalContext.current
    WindowCompat.setDecorFitsSystemWindows((context as Activity).window, false)

    var keyboardStatus by remember {
        mutableStateOf(false)
    }

    (context as Activity).window.decorView.addKeyboardInsetListener {
        keyboardStatus = it
    }

    val focusRequester = FocusRequester()
    CommonToolbar(navCtrl, title) {
        ProvideWindowInsets {
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                modifier = Modifier
                    .fillMaxWidth()
                    .statusBarsPadding()
                    .navigationBarsWithImePadding()
            ) {
                val text = remember {
                    mutableStateOf(TextFieldValue())
                }

                TextField(
                    modifier = Modifier
                        .fillMaxWidth()
                        .focusRequester(focusRequester),
                    value = text.value,
                    onValueChange = { text.value = it },
                    placeholder = {
                        Text(text = "请输入内容", color = Color.LightGray)
                    }

                )
                Spacer(Modifier.weight(1f))
                if (keyboardStatus) {
                    Box(modifier = Modifier.fillMaxWidth()) {
                        Row(
                            modifier = Modifier
                                .fillMaxWidth()
                                .background(color = Color.DarkGray)
                                .padding(top = 10.dp, bottom = 10.dp),
                            horizontalArrangement = Arrangement.SpaceEvenly,
                            verticalAlignment = Alignment.CenterVertically,
                        ) {
                            Text(
                                text = "😀",
                                modifier = Modifier
                                    .weight(1f)
                                    .clickable {
                                        text.value =
                                            text.value.copy(
                                                text = text.value.text + "😀",
                                                selection = TextRange((text.value.text + "😀").length)
                                            )
                                    },
                                textAlign = TextAlign.Center,
                            )
                            Text(
                                text = "🤣",
                                modifier = Modifier
                                    .weight(1f)
                                    .clickable {
                                        text.value =
                                            text.value.copy(
                                                text = text.value.text + "🤣",
                                                selection = TextRange((text.value.text + "🤣").length)
                                            )
                                    },
                                textAlign = TextAlign.Center,
                            )
                            Text(
                                text = "😇",
                                modifier = Modifier
                                    .weight(1f)
                                    .clickable {
                                        text.value =
                                            text.value.copy(
                                                text = text.value.text + "😇",
                                                selection = TextRange((text.value.text + "😇").length)
                                            )
                                    },
                                textAlign = TextAlign.Center,
                            )
                            Text(
                                text = "🐺",
                                modifier = Modifier
                                    .weight(1f)
                                    .clickable {
                                        text.value =
                                            text.value.copy(
                                                text = text.value.text + "🐺",
                                                selection = TextRange((text.value.text + "🐺").length)
                                            )
                                    },
                                textAlign = TextAlign.Center,
                            )
                            Text(
                                text = "🐽",
                                modifier = Modifier
                                    .weight(1f)
                                    .clickable {
                                        text.value =
                                            text.value.copy(
                                                text = text.value.text + "🐽",
                                                selection = TextRange((text.value.text + "🐽").length)
                                            )
                                    },
                                textAlign = TextAlign.Center,
                            )
                            Text(
                                text = "🐸",
                                modifier = Modifier
                                    .weight(1f)
                                    .clickable {
                                        text.value = text.value.copy(
                                            text = text.value.text + "🐸",
                                            selection = TextRange((text.value.text + "🐸").length),
                                        )
                                    },
                                textAlign = TextAlign.Center,
                            )
                        }
                    }
                }
            }
        }
    }
}

@RequiresApi(Build.VERSION_CODES.R)
fun View.addKeyboardInsetListener(keyboardCallback: (visible: Boolean) -> Unit) {
    doOnLayout {
        //get init state of keyboard
        var keyboardVisible = rootWindowInsets?.isVisible(WindowInsets.Type.ime()) == true

        //callback as soon as the layout is set with whether the keyboard is open or not
        keyboardCallback(keyboardVisible)

        //whenever there is an inset change on the App, check if the keyboard is visible.
        setOnApplyWindowInsetsListener { _, windowInsets ->
            val keyboardUpdateCheck =
                rootWindowInsets?.isVisible(WindowInsets.Type.ime()) == true
            //since the observer is hit quite often, only callback when there is a change.
            if (keyboardUpdateCheck != keyboardVisible) {
                keyboardCallback(keyboardUpdateCheck)
                keyboardVisible = keyboardUpdateCheck
            }

            windowInsets
        }
    }
}