Jetpack Compose实现仿WhatsApp聊天界面顶栏固定适配问题

问题根因 #

软键盘弹出时TopBar被挤出屏幕，核心是两个配置错误：

1. 根布局错误消费了全局IME（软键盘）Insets，导致整个布局可用高度被压缩，配置了垂直滚动的消息列表测量时向上偏移，连带顶走TopBar
2. 部分场景下Activity配置了adjustPan软键盘模式，系统会强行平移整个窗口露出输入框，直接把顶部内容顶出可视区域

分步修复 #

1. 修正Activity软键盘模式 #

在AndroidManifest.xml中，对应聊天页Activity配置如下属性，禁止全局窗口平移：

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

禁止使用adjustPan模式，该模式会强制平移整个窗口，必然导致TopBar位移。

2. 修正布局约束逻辑，仅给输入框区域适配软键盘高度 #

核心原则：TopBar始终锚定根布局顶部，软键盘高度仅作为输入框的底部边距，不向上传递约束影响TopBar位置。
修复后的完整代码：

@OptIn(ExperimentalMaterial3Api::class)
@Preview(showBackground = true)
@Composable
fun ConstraintChat() {
    val density = LocalDensity.current
    // 单独获取软键盘、顶部状态栏的Insets，不要全局混用
    val imeBottomPadding = with(density) { WindowInsets.ime.getBottom(density).toDp() }
    val statusBarTopPadding = with(density) { WindowInsets.statusBars.getTop(density).toDp() }

    ConstraintLayout(
        modifier = Modifier
            .fillMaxSize()
            // 根布局仅适配顶部状态栏高度，不添加全局软键盘padding
            .padding(top = statusBarTopPadding)
    ) {
        val (appBar, editBox, content) = createRefs()

        // TopBar固定锚定根布局顶部，不受底部布局变化影响
        Row(
            Modifier
                .fillMaxWidth()
                .height(56.dp)
                .background(Color.LightGray)
                .constrainAs(appBar) {
                    top.linkTo(parent.top)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                }, 
            horizontalArrangement = Arrangement.Start,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(
                "Title", 
                modifier = Modifier.padding(8.dp),
                style = MaterialTheme.typography.headlineSmall
            )
        }

        // 消息列表区域高度自适应，底部始终锚定输入框顶部
        ChatContent(
            modifier = Modifier
                .fillMaxWidth()
                .constrainAs(content) {
                    top.linkTo(appBar.bottom)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                    bottom.linkTo(editBox.top)
                    height = Dimension.fillToConstraints
                }
        )

        // 输入框底部增加软键盘高度边距，软键盘弹出时自动贴在键盘顶部
        ChatEditText(
            textFieldValue = TextFieldValue(""), 
            onChange = {}, 
            onNewMessage = {},
            modifier = Modifier
                .constrainAs(editBox) {
                    bottom.linkTo(parent.bottom, margin = imeBottomPadding)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                }
        )
    }
}

关键注意点 #

• 不要给根布局添加WindowInsets.ime相关的全局padding，否则会压缩整个根布局高度，把TopBar挤出屏幕
• 如果用LazyColumn实现消息列表，可以额外监听imeBottomPadding的数值变化，软键盘弹出时自动调用listState.animateScrollToItem(listSize-1)滚动到最新消息，对齐主流聊天软件交互
• 如果使用Material3的Scaffold实现页面，注意把contentWindowInsets参数设置为WindowInsets.statusBars，不要传入包含IME的Insets集合，避免Scaffold自动给整个内容区加软键盘padding导致顶栏位移

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