Android Compose中如何避免文本与右上角按钮重叠？

原问题代码 #

@Composable
fun DynamicMessageBanner(
    title: String,
    message: String,
    clickableText: AnnotatedString,
    onClickableTextClicked: () -> Unit,
    onCloseClicked: () -> Unit
) {
    Card(
        modifier = Modifier
                .fillMaxWidth()
                .border(width = 1.dp, color = UIBlue, shape = RoundedCornerShape(size = 4.dp)),
        backgroundColor = UIBlue20,
        shape = RoundedCornerShape(4.dp),
        elevation = 0.dp
    ) {
        Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.End) {
            Box(contentAlignment = Alignment.TopEnd) {
                IconButton(onClick = onCloseClicked) {
                    Icon(
                            painterResource(id = R.drawable.ic_cross), null,
                            modifier = Modifier
                                    .width(24.dp)
                                    .height(24.dp),
                            tint = Color.Unspecified
                    )
                }
            }
        }


        Column(
            modifier = Modifier
                    .fillMaxWidth()
                    .padding(12.dp, 0.dp)
        ) {
            Spacer(modifier = Modifier.height(12.dp))

            Text(text = title, style = MercuryTheme.typography.headline50)

            Spacer(modifier = Modifier.height(12.dp))

            Text(
                text = message,
                style = MercuryTheme.typography.paragraph500Medium,
            )

            Spacer(modifier = Modifier.height(8.dp))

            ClickableText(
                modifier = Modifier.align(Alignment.Start),
                text = clickableText,
                style = MercuryTheme.typography.paragraph400Medium,
            ) {
                onClickableTextClicked()
            }
            Spacer(modifier = Modifier.height(12.dp))
        }
    }
}

问题描述 #

当前实现的DynamicMessageBanner在标题文本过长时，会与右上角的关闭按钮发生重叠，需要调整布局逻辑，让按钮优先占据固定空间，确保标题文本不会覆盖按钮。

解决方案：布局层级重构 #

核心思路是将关闭按钮与标题放在同一个Row布局内，让按钮占据固定尺寸空间，标题通过weight(1f)填充剩余宽度，自动处理文本换行。

修改后的完整代码：

@Composable
fun DynamicMessageBanner(
    title: String,
    message: String,
    clickableText: AnnotatedString,
    onClickableTextClicked: () -> Unit,
    onCloseClicked: () -> Unit
) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .border(width = 1.dp, color = UIBlue, shape = RoundedCornerShape(4.dp)),
        backgroundColor = UIBlue20,
        shape = RoundedCornerShape(4.dp),
        elevation = 0.dp
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(12.dp)
        ) {
            // 顶部行：标题 + 关闭按钮，确保按钮不被标题覆盖
            Row(
                modifier = Modifier.fillMaxWidth(),
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(
                    text = title,
                    style = MercuryTheme.typography.headline50,
                    modifier = Modifier.weight(1f), // 标题占据剩余宽度，超长自动换行
                    maxLines = Int.MAX_VALUE // 可根据需求限制行数，比如2行
                )
                IconButton(onClick = onCloseClicked) {
                    Icon(
                        painterResource(id = R.drawable.ic_cross),
                        contentDescription = "关闭",
                        modifier = Modifier.size(24.dp),
                        tint = Color.Unspecified
                    )
                }
            }

            Spacer(modifier = Modifier.height(12.dp))

            Text(
                text = message,
                style = MercuryTheme.typography.paragraph500Medium,
            )

            Spacer(modifier = Modifier.height(8.dp))

            ClickableText(
                modifier = Modifier.align(Alignment.Start),
                text = clickableText,
                style = MercuryTheme.typography.paragraph400Medium,
            ) {
                onClickableTextClicked()
            }
        }
    }
}

关键修改说明 #

1. 布局整合：将独立的关闭按钮Row与标题所在Column合并，顶部用单个Row容纳标题和按钮，避免布局层级分离导致的重叠。
2. 权重分配：标题添加Modifier.weight(1f)，使其占据Row内除按钮外的所有剩余宽度，文本过长时自动换行。
3. 简化层级：移除多余的Box嵌套和Spacer，优化布局结构，提升渲染性能。
4. 可访问性优化：给Icon添加contentDescription，符合Compose的可访问性规范。

额外优化建议 #

• 如果需要限制标题行数，可添加maxLines = 2和overflow = TextOverflow.Ellipsis参数，避免标题占用过多垂直空间。
• 保持布局嵌套层级尽可能简洁，减少不必要的容器组件。

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