如何在 jetpackCompose 中对齐 LazyColumn 内的不同项目

Question

我正在用 firebase 构建一个聊天应用程序，我需要在最后写消息时和在开始时对齐聊天气泡，就像在 whatsapp 中一样。如果我在lazyColumn 中使用horizo​​ntalArrangement，它会影响所有项目。我尝试在聊天气泡中使用 modifier.align 但没有任何反应。我该怎么做？

下面是我的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
                )
            )
        }

    }
}

Answer 1

您可以为每个项目添加一个 Row，应用不同的 horizontalArrangement 删除 Modifier.align 中的 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
                        )
                    )
                }
            }