如何在Android Compose中创建带弹出软键盘的预览？

Compose预览目前没有内置的直接唤起软键盘的功能，但可以通过以下几种替代方案模拟键盘弹出后的布局表现，结合ime相关修饰符实现更真实的效果：

方案1：自定义IME Insets模拟键盘高度 #

通过修改WindowInsets来模拟软键盘的底部偏移，让布局自动适配，配合imePadding()或windowInsetsPadding()修饰符生效：

@Preview
@Composable
fun UIWithSimulatedKeyboardPreview() {
    // 模拟常见软键盘高度（可根据需求调整，一般300-500dp）
    val simulatedKeyboardHeight = 400.dp
    val density = LocalDensity.current

    Column(
        modifier = Modifier
            .fillMaxSize()
            // 叠加模拟的键盘Insets到系统IME Insets上
            .windowInsetsPadding(
                WindowInsets.ime.add(
                    WindowInsets(
                        bottom = with(density) { simulatedKeyboardHeight.roundToPx() }
                    )
                )
            )
    ) {
        // 示例UI：输入框 + 底部元素
        OutlinedTextField(
            value = "",
            onValueChange = {},
            label = { Text("输入内容") },
            modifier = Modifier.fillMaxWidth()
        )
        Spacer(modifier = Modifier.weight(1f))
        Text(
            text = "底部操作栏",
            modifier = Modifier
                .fillMaxWidth()
                .background(Color.LightGray)
                .padding(16.dp)
        )
    }
}

这种方式会让布局像真实键盘弹出时一样自动调整，适合验证底部元素是否被正确推起或适配。

方案2：手动缩小预览可用高度 #

直接限制预览的整体高度，模拟键盘占据部分屏幕后的剩余空间，操作简单快速：

@Preview
@Composable
fun UIWithReducedHeightPreview() {
    // 假设屏幕总高度800dp，键盘占400dp，剩余可用高度设为400dp
    Box(modifier = Modifier.height(400.dp).fillMaxWidth()) {
        Column(modifier = Modifier.fillMaxSize()) {
            OutlinedTextField(
                value = "",
                onValueChange = {},
                label = { Text("输入内容") },
                modifier = Modifier.fillMaxWidth()
            )
            Spacer(modifier = Modifier.weight(1f))
            Text(
                text = "底部操作栏",
                modifier = Modifier
                    .fillMaxWidth()
                    .background(Color.LightGray)
                    .padding(16.dp)
            )
        }
    }
}

适合快速验证布局在空间压缩时的表现，无需处理Insets逻辑。

方案3：通过CompositionLocal替换IME Insets #

通过CompositionLocalProvider覆盖系统默认的IME Insets，让imePadding()等修饰符直接读取模拟值，更贴近真实场景：

@Preview
@Composable
fun UIWithOverriddenImeInsetsPreview() {
    val simulatedImeInsets = WindowInsets(
        bottom = with(LocalDensity.current) { 400.dp.roundToPx() }
    )
    // 替换系统IME Insets为模拟值
    CompositionLocalProvider(
        LocalWindowInsets provides LocalWindowInsets.current.replace(
            WindowInsets.Type.ime(), simulatedImeInsets
        )
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .imePadding() // 自动应用模拟的键盘padding
        ) {
            OutlinedTextField(
                value = "",
                onValueChange = {},
                label = { Text("输入内容") },
                modifier = Modifier.fillMaxWidth()
            )
            Spacer(modifier = Modifier.weight(1f))
            Text(
                text = "底部操作栏",
                modifier = Modifier
                    .fillMaxWidth()
                    .background(Color.LightGray)
                    .padding(16.dp)
            )
        }
    }
}

关于ime修饰符的说明 #

• imePadding()：自动添加与软键盘高度一致的底部padding，避免布局被键盘遮挡；
• imeNestedScroll()：处理滚动布局与键盘的交互（比如键盘弹出时自动滚动到输入框）；
  在预览中，这些修饰符需要配合模拟的IME Insets才能生效，因为预览环境没有真实的键盘触发系统Insets变化。

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