Compose Android 中防止文本重叠按钮

Question

我创建了如下视图：

@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))
        }
    }
}

我目前遇到的问题是，如果文本太长，标题文本会与右上角的 X 按钮重叠。在生成文本之前，是否有创建这种视图的最佳实践，首先将按钮添加到右上角？

当前视图如下所示（文本与右上角的按钮重叠）：

谢谢。

Answer 1

您想将标题放在与

Row

相同的

Icon

中，并将

weight

设置在其

modifier

上。

这样

Icon

将具有静态大小，标题的

Text

将填充其余部分。

至于为什么它覆盖了图标 - Material3 之前的

Card

有

BoxScope

（“

FrameLayout

”）。

Column

和

Row

都有

.fillMaxWidth()

，所以它们都填满了空间。

@Composable
fun DynamicMessageBanner(
    title: String,
    message: String,
    clickableText: AnnotatedString,
    onClickableTextClicked: () -> Unit,
    onCloseClicked: () -> Unit
) {
    Card() {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(12.dp, 0.dp)
        ) {
            Spacer(modifier = Modifier.height(12.dp))
            Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.End) {
                Text(modifier = Modifier.weight(1f), text = title, style =  MaterialTheme.typography.headlineLarge)
                Box(contentAlignment = Alignment.TopEnd) {
                    IconButton(onClick = onCloseClicked) {

                    }
                }
            }
            Spacer(modifier = Modifier.height(12.dp))
            Text(text = message, style = MaterialTheme.typography.bodyMedium)
            Spacer(modifier = Modifier.height(8.dp))
            ClickableText() {
                onClickableTextClicked()
            }
            Spacer(modifier = Modifier.height(12.dp))
        }
    }
}