预览:
虚拟设备:
代码:
@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 不会影响其大小和填充。错误在哪里?