Jetpack Compose for TV 登录界面Soft Keyboard固定位置实现咨询

要实现这种上半部分为输入区域、下半部分固定显示软键盘的布局，有两种可行方案，具体如下：

方案一：强制显示系统软键盘并约束布局 #

利用Jetpack Compose的LocalSoftwareKeyboardController强制弹出系统软键盘，同时通过布局权重将输入区域固定在上半部分，让系统键盘自然占据下半空间。

实现代码 #

@Composable
fun LoginScreen() {
    var username by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }
    val keyboardController = LocalSoftwareKeyboardController.current

    // 界面初始化时强制弹出软键盘
    LaunchedEffect(Unit) {
        keyboardController?.show()
    }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.SpaceBetween
    ) {
        // 上半部分：用户名、密码输入框
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f)
                .padding(16.dp)
                .imePadding(), // 避免输入框被键盘遮挡
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            OutlinedTextField(
                value = username,
                onValueChange = { username = it },
                label = { Text("用户名") },
                modifier = Modifier.fillMaxWidth()
            )
            Spacer(modifier = Modifier.height(16.dp))
            OutlinedTextField(
                value = password,
                onValueChange = { password = it },
                label = { Text("密码") },
                visualTransformation = PasswordVisualTransformation(),
                modifier = Modifier.fillMaxWidth()
            )
            Spacer(modifier = Modifier.height(16.dp))
            Button(onClick = { /* 执行登录逻辑 */ }) {
                Text("登录")
            }
        }
    }
}

注意事项 #

• 系统软键盘的位置由Android系统管理，部分设备可能存在兼容性问题，比如键盘弹出后布局偏移不符合预期；
• 添加imePadding()修饰符确保输入区域不会被键盘遮挡；
• 若输入框失去焦点，键盘会自动收起，可通过监听输入框焦点状态，在失去焦点时重新调用keyboardController?.show()强制弹出。

方案二：自定义软键盘组件（推荐） #

完全抛弃系统软键盘，自己实现一个键盘组件固定在界面下半部分，这种方式能100%控制布局和样式，稳定性更高。

实现代码 #

首先定义自定义键盘组件：

@Composable
fun CustomKeyboard(
    onKeyPressed: (String) -> Unit,
    onBackspacePressed: () -> Unit,
    onConfirmPressed: () -> Unit
) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.LightGray)
            .padding(8.dp)
    ) {
        // 数字键行1
        Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
            listOf("1", "2", "3").forEach { key ->
                KeyboardButton(key = key, onClick = { onKeyPressed(key) })
            }
        }
        // 数字键行2
        Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
            listOf("4", "5", "6").forEach { key ->
                KeyboardButton(key = key, onClick = { onKeyPressed(key) })
            }
        }
        // 数字键行3 + 退格
        Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
            listOf("7", "8", "9").forEach { key ->
                KeyboardButton(key = key, onClick = { onKeyPressed(key) })
            }
            KeyboardButton(key = "←", onClick = onBackspacePressed)
        }
        // 0 + 确认
        Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
            KeyboardButton(key = "0", onClick = { onKeyPressed("0") }, weight = 2f)
            KeyboardButton(key = "确认", onClick = onConfirmPressed, weight = 1f)
        }
    }
}

@Composable
private fun KeyboardButton(
    key: String,
    onClick: () -> Unit,
    weight: Float = 1f
) {
    Button(
        onClick = onClick,
        modifier = Modifier
            .weight(weight)
            .padding(4.dp)
            .height(60.dp),
        colors = ButtonDefaults.buttonColors(backgroundColor = Color.White)
    ) {
        Text(text = key, fontSize = 20.sp)
    }
}

然后在登录界面中使用：

@Composable
fun LoginScreenWithCustomKeyboard() {
    var username by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }
    var isUsernameFocused by remember { mutableStateOf(true) }

    Column(modifier = Modifier.fillMaxSize()) {
        // 上半部分：输入区域
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f)
                .padding(16.dp),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            OutlinedTextField(
                value = username,
                onValueChange = { username = it },
                label = { Text("用户名") },
                modifier = Modifier.fillMaxWidth(),
                keyboardOptions = KeyboardOptions.Default.copy(
                    keyboardType = KeyboardType.Text,
                    imeAction = ImeAction.Next
                ),
                keyboardActions = KeyboardActions(onNext = { isUsernameFocused = false }),
                onFocusChanged = { isUsernameFocused = it.isFocused }
            )
            Spacer(modifier = Modifier.height(16.dp))
            OutlinedTextField(
                value = password,
                onValueChange = { password = it },
                label = { Text("密码") },
                visualTransformation = PasswordVisualTransformation(),
                modifier = Modifier.fillMaxWidth(),
                keyboardOptions = KeyboardOptions.Default.copy(
                    keyboardType = KeyboardType.Password,
                    imeAction = ImeAction.Done
                ),
                onFocusChanged = { isUsernameFocused = !it.isFocused }
            )
            Spacer(modifier = Modifier.height(16.dp))
            Button(onClick = { /* 执行登录逻辑 */ }) {
                Text("登录")
            }
        }

        // 下半部分：固定显示自定义键盘
        CustomKeyboard(
            onKeyPressed = { key ->
                if (isUsernameFocused) {
                    username += key
                } else {
                    password += key
                }
            },
            onBackspacePressed = {
                if (isUsernameFocused) {
                    username = username.dropLast(1)
                } else {
                    password = password.dropLast(1)
                }
            },
            onConfirmPressed = { /* 确认输入逻辑 */ }
        )
    }
}

优势 #

• 完全自定义键盘的样式、布局和交互逻辑，适配性更强；
• 不受系统键盘的限制，确保下半部分始终显示键盘；
• 无需处理系统键盘的弹出/收起逻辑，减少兼容性问题。

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