我正在用Jetpack Compose构建一个类似WhatsApp的聊天界面，消息区使用一个 LazyColumn 来呈现消息，输入框固定在屏幕底部。

我在消息输入方面遇到了两个相关的问题：

1) 键盘上方的额外空白

当键盘打开时，输入条与消息列表之间会出现一段较大的空白，输入行看起来像悬浮在键盘上方，而不是紧贴键盘。

我目前使用：

• imePadding()
• navigationBarsPadding()
• onSizeChanged 用于测量输入行高度
• 动态 contentPadding 在 LazyColumn 中

2) 当文本以空格开头时，TextField高度异常变化

消息输入框是多行的，我注意到如果用户在消息的开头输入一个或多个空格，OutlinedTextField 的高度会以不稳定的方式变化。所以在输入时，该字段的高度看起来不稳定。

我希望输入框的行为像WhatsApp：

• 稳定的圆角输入框
• 需要时再自动展开
• 在输入前导空格时不出现意外的高度跳变
• 能正确固定在键盘上方

以下是相关代码：

var text by remember { mutableStateOf("") }

Box(
    modifier = Modifier
        .fillMaxSize()
        .imePadding()
        .navigationBarsPadding()
) {
    var inputBarHeight by remember { mutableIntStateOf(0) }

    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        state = listState,
        contentPadding = PaddingValues(
            start = 12.dp,
            end = 12.dp,
            bottom = with(LocalDensity.current) { inputBarHeight.toDp() }
        )
    ) {
        items(messages) { message ->
            MessageBubble(message = message)
        }
    }

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .align(Alignment.BottomCenter)
            .onSizeChanged { inputBarHeight = it.height },
        verticalAlignment = Alignment.Bottom
    ) {
        OutlinedTextField(
            value = text,
            onValueChange = { text = it },
            modifier = Modifier
                .weight(1f)
                .heightIn(min = 56.dp, max = 120.dp),
            placeholder = {
                Text("Message...")
            },
            shape = RoundedCornerShape(50),
            maxLines = 5
        )
    }
}

问题

1. 在这个聊天布局中，处理键盘内嵌（insets）的正确方法是什么，以便输入栏紧贴键盘且没有额外空白？
2. 当文本以空格开头时，OutlinedTextField 的高度为何会变化？
3. 在Jetpack Compose中，构建一个像WhatsApp那样的可扩展消息字段，且高度稳定的最佳做法是什么？

如果有任何建议或最佳实践，欢迎分享。

解决方案

把布局想成这样的：

[ LazyColumn (messages) ]
[ Input bar (fixed at bottom) ]
[ Keyboard ]

Box(modifier = Modifier.fillMaxSize()) {

    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        state = listState,
        contentPadding = PaddingValues(
            start = 12.dp,
            end = 12.dp,
            bottom = 72.dp // fixed or derived, see below
        )
    ) {
        items(messages) {
            MessageBubble(message = it)
        }
    }

    Row(
        modifier = Modifier
            .align(Alignment.BottomCenter)
            .fillMaxWidth()
            .navigationBarsPadding()
            .imePadding(),
        verticalAlignment = Alignment.Bottom
    ) {
        MessageInput(...)
    }
}

从父级移除：
.imePadding()

避免这种模式：
onSizeChanged → 动态LazyColumn padding

使用一个固定的最小高度（就像WhatsApp那样）：

bottom = 72.dp

或者如果你追求精确的话：

val inputBarHeight = 56.dp + 16.dp