为何Jetpack Compose预览与模拟器显示结果不一致？

预览效果 #

虚拟设备显示效果 #

对应实现代码 #

@Composable
fun ChatView(
    recentChat: RecentChat,
    onClick: () -> Unit
) {
    Row(
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .fillMaxWidth()
            .clickable(onClick = onClick)
    ) {

        Image(...)
        Column {

            Row(
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier.fillMaxWidth()
            ) {
                Text(recentChat.user.userName, maxLines = 1)
                Text(
                    text = timestamp,
                    fontSize = 12.sp
                )
            }

            Row(
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier.fillMaxWidth()
            ) {
                Text(
                    text = recentChat.chat.lastMessage,
                    maxLines = 1,
                    modifier = Modifier.weight(1f)
                )

                if (recentChat.newMessagesCount > 0) {
                    Box(
                        contentAlignment = Alignment.Center,
                        modifier = Modifier
                            .defaultMinSize(20.dp, 20.dp)
                            .background(Color(0xFF65B343), CircleShape)
                            .padding(2.dp)
                    ) {
                        Text(
                            text = "${recentChat.newMessagesCount}",
                            fontSize = 14.sp
                        )
                    }
                }
            }

        }
    }
}

问题排查结果 #

结合代码和显示效果，以下是导致布局异常的核心问题：

• Column未设置权重：外层Row中的Column缺少Modifier.weight(1f)，无法占据Row剩余的全部宽度，内部的fillMaxWidth()无法生效，进而导致子Row的SpaceBetween对齐失效，元素挤压错乱。
• 缺少整体内边距：ChatView的根Row没有添加padding，导致内容直接贴紧屏幕边缘，和预览图的排版风格不符。
• timestamp变量未定义：代码中直接使用了timestamp但未声明，会引发编译错误，无法正常运行。
• 消息计数文本可读性差：消息计数的Text未设置浅色（如白色），在绿色背景上文字辨识度低。
• Image组件未完善：当前Image是占位状态，若实际实现时未设置固定尺寸（如size(48.dp)）或正确的contentScale，会导致整体布局偏移。

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