Android中如何让Jetpack Compose元素显示在键盘上方？

前置配置 #

首先在AndroidManifest.xml中为对应Activity添加软输入法调整配置，保证窗口会跟随键盘弹出自动调整尺寸：

<activity
    android:name=".YourActivity"
    android:windowSoftInputMode="adjustResize" />

核心实现 #

Jetpack Compose 1.2.0及以上版本官方提供了imePadding()修饰符，会自动识别当前输入法的高度，给组件添加对应的padding，一行代码即可实现需求。

示例1：配合Scaffold实现（推荐） #

Scaffold的bottomBar槽位天然适配底部固定组件的需求，直接给底部按钮添加imePadding()即可：

@Composable
fun FormPage() {
    Scaffold(
        bottomBar = {
            Button(
                onClick = { /* 处理点击逻辑 */ },
                modifier = Modifier
                    .fillMaxWidth()
                    // 核心修饰符：自动适配输入法+系统导航栏高度
                    .imePadding()
                    .padding(16.dp),
                enabled = false
            ) {
                Text(text = "下一步")
            }
        }
    ) { innerPadding ->
        // 主内容区域，比如放置表单输入项
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(innerPadding)
                .padding(horizontal = 16.dp)
                .verticalScroll(rememberScrollState())
        ) {
            Spacer(modifier = Modifier.height(32.dp))
            TextField(
                value = "",
                onValueChange = {},
                placeholder = { Text("请输入用户名") },
                modifier = Modifier.fillMaxWidth()
            )
            Spacer(modifier = Modifier.height(24.dp))
            TextField(
                value = "",
                onValueChange = {},
                placeholder = { Text("请输入手机号") },
                modifier = Modifier.fillMaxWidth()
            )
            // 其他页面内容
        }
    }
}

示例2：不使用Scaffold的实现 #

如果不想用Scaffold，用Column+weight分配布局也可以实现：

@Composable
fun FormPage() {
    Column(modifier = Modifier.fillMaxSize()) {
        // 主内容区域，weight占用除底部按钮外的所有空间
        Column(
            modifier = Modifier
                .weight(1f)
                .padding(16.dp)
                .verticalScroll(rememberScrollState())
        ) {
            TextField(
                value = "",
                onValueChange = {},
                placeholder = { Text("请输入内容") },
                modifier = Modifier.fillMaxWidth()
            )
            // 其他页面内容
        }
        // 底部固定按钮
        Button(
            onClick = { /* 处理点击逻辑 */ },
            modifier = Modifier
                .fillMaxWidth()
                .imePadding()
                .padding(16.dp)
        ) {
            Text(text = "下一步")
        }
    }
}

低版本兼容说明 #

如果你使用的Compose版本低于1.2.0，没有内置imePadding修饰符，可以使用Jetpack官方配套工具库Accompanist的Insets组件实现相同效果，用法和内置修饰符基本一致。

内容的提问来源于stack exchange，提问作者Anudeep Ananth