问题描述
限时送ChatGPT账号..我正在用 firebase 构建一个聊天应用程序,我需要在最后写消息时和在开始时对齐聊天气泡,就像在 whatsapp 中一样.如果我在lazyColumn 中使用horizontalArrangement,它会影响所有项目.我尝试在聊天气泡中使用 modifier.align 但没有任何反应.我该怎么做?
I am building a chat app with firebase and I need to align the chat bubbles in the end when I write the message and in the start when I receive, like in whatsapp. If I use the horizontalArrangement in the lazyColumn it affects all the items. I tried using the modifier.align in the chat bubbles but nothing happens. How can I do this?
下面是我的lazyColumn
below is my lazyColumn
LazyColumn(
modifier = Modifier.fillMaxWidth(),
) {
if (list != null && list.isNotEmpty()) {
items(items = list) {
if (it.user1id == args.userId) {
ChatCard(
message = it,
color = Color.Magenta,
modifier = Modifier
.align(Alignment.CenterHorizontally)
.padding(
start = 32.dp,
end = 4.dp,
top = 4.dp
)
)
} else {
ChatCard(
message = it,
color = Color.White,
Modifier.padding(
start = 4.dp,
end = 32.dp,
top = 4.dp
)
)
}
}
}
}
@Composable
fun ChatCard(message: Message, color: Color, modifier: Modifier = Modifier){
Card(
modifier = modifier,
backgroundColor = color,
shape = RoundedCornerShape(10.dp)
) {
Row(
modifier = Modifier.padding(4.dp),
horizontalArrangement = Arrangement.SpaceBetween
) {
Text(
modifier = Modifier
.padding(4.dp)
.widthIn(0.dp, 280.dp),
text = message.message
)
Text(
modifier = Modifier.padding(4.dp),
text = message.time,
style = TextStyle(
fontSize = 12.sp,
color = Color.LightGray
)
)
}
}
}
推荐答案
您可以为应用不同的 horizontalArrangement
的每个项目添加一个 Row
,移除 Modifier.在您的
.Card
中对齐
You can add a Row
for each item applying a different horizontalArrangement
removing the Modifier.align
in your Card
.
类似于:
items(items = itemsList) {
Row(Modifier.fillMaxWidth(),
horizontalArrangement = if (it == ....)
Arrangement.Start else
Arrangement.End) {
if (it == ....) {
ChatCard(
color = Color.Magenta,
modifier = Modifier
.padding(
start = 32.dp,
end = 4.dp,
top = 4.dp
)
)
} else {
ChatCard(
color = Color.White,
Modifier.padding(
start = 4.dp,
end = 32.dp,
top = 4.dp
)
)
}
}
这篇关于如何在 jetpackCompose 中对齐 LazyColumn 内的不同项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论