如何在 jetpackCompose 中对齐 LazyColumn 内的不同项目 [英] How can I align different items inside LazyColumn in jetpackCompose

问题描述

我正在用 firebase 构建一个聊天应用程序，我需要在最后写消息时和在开始时对齐聊天气泡，就像在 whatsapp 中一样.如果我在lazyColumn 中使用horizo​​ntalArrangement，它会影响所有项目.我尝试在聊天气泡中使用 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
                )
            )
        }

    }
}

推荐答案

您可以为应用不同的 horizo​​ntalArrangement 的每个项目添加一个 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屋！