Compose 中 Keyboard

在 Jetpack Compose 中，键盘交互是一个重要的部分，尤其是在处理文本输入时。Compose 提供了丰富的 API 来处理软键盘的显示、隐藏和与键盘的交互。下面我们将详细介绍如何在 Compose 中处理键盘事件，并提供一些示例代码。

基本的键盘处理

Jetpack Compose 提供了 TextField 组件用于文本输入。当 TextField 获得焦点时，系统会自动显示软键盘。我们可以使用 remember 和 mutableStateOf 来存储文本输入的状态。

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Composable
fun BasicTextFieldExample() {
    var text by remember { mutableStateOf(TextFieldValue("")) }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        BasicTextField(
            value = text,
            onValueChange = { text = it },
            modifier = Modifier
                .fillMaxWidth()
                .height(56.dp)
                .padding(8.dp)
                .background(MaterialTheme.colorScheme.background)
        )
    }
}

@Preview(showBackground = true)
@Composable
fun PreviewBasicTextFieldExample() {
    BasicTextFieldExample()
}

处理键盘显示和隐藏

为了手动控制软键盘的显示和隐藏，我们可以使用 LocalSoftwareKeyboardController。以下示例展示了如何在按钮点击时显示和隐藏键盘。

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Composable
fun KeyboardControlExample() {
    var text by remember { mutableStateOf(TextFieldValue("")) }
    val keyboardController = LocalSoftwareKeyboardController.current

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        BasicTextField(
            value = text,
            onValueChange = { text = it },
            modifier = Modifier
                .fillMaxWidth()
                .height(56.dp)
                .padding(8.dp)
                .background(MaterialTheme.colorScheme.background)
        )

        Spacer(modifier = Modifier.height(16.dp))

        Row {
            Button(onClick = { keyboardController?.show() }) {
                Text("Show Keyboard")
            }

            Spacer(modifier = Modifier.width(16.dp))

            Button(onClick = { keyboardController?.hide() }) {
                Text("Hide Keyboard")
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun PreviewKeyboardControlExample() {
    KeyboardControlExample()
}

处理键盘操作事件

有时我们需要处理特定的键盘操作，例如点击“完成”按钮时执行某些操作。我们可以使用 onImeActionPerformed 来处理这些事件。

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Composable
fun KeyboardActionsExample() {
    var text by remember { mutableStateOf(TextFieldValue("")) }
    val keyboardController = LocalSoftwareKeyboardController.current

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        TextField(
            value = text,
            onValueChange = { text = it },
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp),
            keyboardOptions = KeyboardOptions.Default.copy(
                imeAction = ImeAction.Done
            ),
            keyboardActions = KeyboardActions(
                onDone = {
                    // 在这里处理完成操作
                    keyboardController?.hide()
                }
            )
        )
    }
}

@Preview(showBackground = true)
@Composable
fun PreviewKeyboardActionsExample() {
    KeyboardActionsExample()
}

结论

通过以上示例代码，我们展示了如何在 Jetpack Compose 中处理键盘的显示、隐藏以及与键盘的交互。使用这些功能，您可以创建更为复杂和用户友好的输入界面。在实际应用中，您可以根据需求进行更为细致的键盘事件处理，以提升用户体验。