主页 / coding / 问题 / 79582400
Accepted
Exicode
Asked: 2025-04-19 20:41:58 +0800 CST

为什么 Jetpack Compose 预览和模拟器显示不同的结果？

  • 772

预览：

在此处输入图片描述

虚拟设备：

在此处输入图片描述

代码：

@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
                        )
                    }
                }
            }

        }


    }

}

View 很简单。Compose 层级结构中较高的只有 Screen，它包含这些 View 的列表。包含项目列表的 Screen 不会影响其大小和填充。错误在哪里？

android-jetpack-compose

1 个回答

  1. Best Answer

    问题出在主题上，移除它就能解决问题。不过，我不知道是哪个部分导致了这种奇怪的行为，我会深入研究。

    UPD：好的，主题在交互元素上添加了多个不同的填充，并且在这种特定情况下将 lineHeight 添加到文本中。

    为了避免这种情况而不禁用主题，可以使用一些方法：

    1. 在主题->排版->lineHeight中设置lineHeight（设置与文本大小相同）
    val Typography = Typography(
    bodyLarge = TextStyle(
        fontSize = 16.sp,
        lineHeight = 16.sp
    )
)
    1. 替换层次结构中所有 Text() 可组合项中的文本样式
    CompositionLocalProvider(LocalTextStyle provides TextStyle.Default) {
    //your composables
}
    1. 替换当前文本中的文本样式（）
    Text(
    ... ,
    style = TextStyle.Default
)
    • 0

相关问题