How ellipsis only middle text in Android Compose?-CodePudding

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?

CodePudding user response：

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,
)