Jetpack Compose消息组件：反转Row元素顺序且不反转文本

你目前通过修改LocalLayoutDirection来反转Row内元素布局，但这种方式会导致文本也跟随布局方向变成RTL，不符合预期。其实不需要依赖布局方向，直接通过调整元素显示顺序和Row的对齐方式，就能实现仅反转组件元素、同时保持文本正常阅读方向的效果。

解决方案思路 #

• 接收消息（incoming）：Row左对齐，元素顺序为「头像 → 间隔 → 消息内容 → 右侧占位间隔」
• 发送消息（outgoing）：Row右对齐，元素顺序为「左侧占位间隔 → 消息内容 → 间隔 → 头像」
• 全程不修改布局方向，确保文本始终保持LTR的正常阅读顺序

修改后的完整代码 #

@Composable
fun MessageView(
    message: Message
) = MessageViewContent(message)

@Composable
private fun MessageViewContent(
    message: Message
) {
    val (isIncoming, text, at) = message

    val background: Color
    val textColor: Color
    val timeColor: Color
    val alignment: Alignment.Horizontal
    val textAlignment: TextAlign
    val rowArrangement: Arrangement.Horizontal

    if (isIncoming) {
        background = Color(0xFFEFEFEF)
        textColor = Color(0xFF000000)
        timeColor = Color(0xFF929292)
        alignment = Alignment.End
        textAlignment = TextAlign.Start
        rowArrangement = Arrangement.Start
    } else {
        background = Color(0xFFE0727F)
        textColor = Color(0xFFFEFEFE)
        timeColor = Color(0xB3FEFEFE)
        alignment = Alignment.Start
        textAlignment = TextAlign.End
        rowArrangement = Arrangement.End
    }

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight(),
        verticalAlignment = Alignment.Bottom,
        horizontalArrangement = rowArrangement
    ) {
        if (isIncoming) {
            // 接收消息：先显示头像
            Image(
                modifier = Modifier
                    .size(40.dp)
                    .clip(CircleShape),
                painter = painterResource(R.drawable.ic_launcher_background),
                contentDescription = null
            )
            Spacer(modifier = Modifier.width(12.dp))
        } else {
            // 发送消息：先显示左侧占位间隔，和接收消息的右侧间隔对称
            Spacer(modifier = Modifier.width(60.dp))
        }

        Column(
            modifier = Modifier
                .weight(1F, fill = false)
                .wrapContentWidth()
                .background(
                    color = background,
                    shape = RoundedCornerShape(8.dp)
                )
                .padding(4.dp),
            horizontalAlignment = alignment
        ) {
            Text(
                modifier = Modifier.padding(6.dp),
                style = TextStyle(
                    fontSize = 16.sp,
                    color = textColor
                ),
                text = text
            )

            Text(
                style = TextStyle(
                    fontSize = 10.sp,
                    color = timeColor,
                    textAlign = textAlignment
                ),
                text = "${at.hour}:${at.minute}",
            )
        }

        if (isIncoming) {
            // 接收消息：显示右侧占位间隔
            Spacer(modifier = Modifier.width(60.dp))
        } else {
            // 发送消息：最后显示头像
            Spacer(modifier = Modifier.width(12.dp))
            Image(
                modifier = Modifier
                    .size(40.dp)
                    .clip(CircleShape),
                painter = painterResource(R.drawable.ic_launcher_background),
                contentDescription = null
            )
        }
    }
}

关键修改点说明 #

1. 移除布局方向修改逻辑：彻底删除CompositionLocalProvider修改LocalLayoutDirection的代码，避免影响文本方向
2. 动态调整Row对齐方式：根据消息类型设置horizontalArrangement，接收消息左对齐，发送消息右对齐
3. 动态调整元素顺序：通过isIncoming判断，分别渲染不同顺序的元素，实现视觉上的反转效果
4. 对称占位间隔：发送消息时左侧的间隔和接收消息右侧的间隔保持一致，保证整体布局的对称性

内容的提问来源于stack exchange，提问作者H4kt