如何对齐文本和图标可组合，以便即使在文本溢出后它们也能保持在一起？答案

【问题标题】：How to align a Text and Icon Composable so that they stay together even after text overflow?如何对齐文本和图标可组合，以便即使在文本溢出后它们也能保持在一起？
【发布时间】：2022-09-23 17:25:11
【问题描述】：

我有一个可组合的文本和图标。我希望图标贴在可组合的右侧。这是我的代码：

Row(
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.Center,
    modifier = Modifier
        .fillMaxWidth()
        .padding(horizontal = 16.dp)
) {
    Text(
        text = subjectName,
        maxLines = 1,
        overflow = TextOverflow.Ellipsis,
        textAlign = TextAlign.Center,
    )
    Icon(
        painter = painterResource(id = R.drawable.ic_arrow_drop_down),
        contentDescription = null
    )
}

对应的用户界面是：

这看起来不错，但是当文本太长并且溢出时，图标会像这样离开屏幕：

相反，我想让它看起来像这样：

我尝试给 Text 可组合一个 weight(1f) 修饰符，以便首先放置图标。现在溢出的文本看起来很好，但是当文本较短时，图标仍然放在最后，因为文本占据了整个剩余宽度：

如何在此处获得所需的 UI（图 1 和图 3）？

标签： android kotlin android-jetpack-compose

【解决方案1】：

只需将weight(1f, fill=false) 修饰符应用于Text。

当fill为true时，元素将被强制占据分配给它的整个宽度。否则，允许元素更小 - 这将导致 Row 更小，因为未使用的分配宽度不会重新分配给其他兄弟姐妹。

就像是：
Row(
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.Center,
    modifier = Modifier
        .fillMaxWidth()
        .padding(horizontal = 16.dp)
) {
    Text(
        text = "subjectName",
        modifier = Modifier.weight(1f, false),
        maxLines = 1,
        overflow = TextOverflow.Ellipsis,
    )
    Icon(
        Icons.Filled.Add,
        contentDescription = "contentDescription"
    )
}

【讨论】：