Android Compose - 包含文本和图像的行 - 如何在不推开图像的情况下保持文本换行

Question

我有一个单行行，其中包含文本模块，后跟图像模块。如果文本很长，就会超出图像。但是，如果我对文本进行加权，它可以解决该问题，但文本块会占用可用空间，而不是我想要的换行。

使用下面的代码，包括文本上的权重修改器，它解决了推开图像的问题。但如果标题很短，则文本不会换行，如下所示： 有分量，标题长 有重量，短标题

但是如果不使用权重，我会得到我想要的文本换行，但如果标题很长，我会丢失此处显示的图像： 无重量，标题长 无重量，短标题

如何保护图像并保持文本换行？

@Composable
fun TitleAndChevron() {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .padding(8.dp)
            .background(color = Color.Black)
            .wrapContentWidth(align = Alignment.Start),
    ) {
        Text(
            text = "The Englishman Who Went Up a Hill But Came Down a Mountain",
            color = Color.White,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
            style = MaterialTheme.typography.titleLarge,
            modifier = Modifier
                .padding(8.dp)
                .weight(1f)
        )
        Image(
            painter = painterResource(id = R.drawable.ic_chevron),
            contentDescription = null,
            modifier = Modifier
                .padding(start = 8.dp, end = 8.dp)
                .size(12.dp),
        )
    }
}

Answer 1

weight

修饰符有第二个参数，称为

fill

，默认值为

true

，这意味着默认情况下元素会填充整个宽度，但如果使用

false

，它只占用所需的宽度，即就是你想要的。

@Composable
fun TitleAndChevron() {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .padding(8.dp)
            .background(color = Color.Black)
            .wrapContentWidth(align = Alignment.Start),
    ) {
        Text(
            text = "The Englishman Who Went Up a Hill But Came Down a Mountain",
            color = Color.White,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
            style = MaterialTheme.typography.titleLarge,
            modifier = Modifier
                .padding(8.dp)
                .weight(1f, fill = false)
        )
        Image(
            painter = painterResource(id = R.drawable.ic_chevron),
            contentDescription = null,
            modifier = Modifier
                .padding(start = 8.dp, end = 8.dp)
                .size(12.dp),
        )
    }
}