如何在 Android Compose 中仅省略中间文本？

Question

I am developing an android app using the jetpack compose.

I want to make a UI like:

Row(
    horizontalArrangement = Arrangement.SpaceBetween
) {
    Row(
        modifier = Modifier.weight(1F)
    ) {
        Text(
            text = name,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
        )

        Spacer(modifier = Modifier.width(4.dp))

        Text(
            text = "($count)",
            maxLines = 1,
        )
    }

    Spacer(modifier = Modifier.width(16.dp))

    Text(
        text = timeText,
    )
}

But actually it shows like:

the count information (1) is cut. How can I show the count information and ellipsis the name text?

Should I use the compose-constraintlayout?

Answer 1

In such cases Modifier.weight should be used on the view, in this case it'll be measured after other siblings:

The parent will divide the vertical space remaining after measuring unweighted child elements and distribute it according to this weight.

If you don't need the view to take all the space available, add fill = false parameter.

Text(
    text = name,
    maxLines = 1,
    overflow = TextOverflow.Ellipsis,
    modifier = Modifier.weight(1f, fill = false)
)

Spacer(modifier = Modifier.width(4.dp))

Text(
    text = "($count)",
    maxLines = 1,
)