Why is TextAlign.Center and TextAlign.Ellipsis in compose shifting the text to the right on each composition?

50 Views Asked by At
Column {
      var isNextVisible by remember {mutableStateOf(false) }
      Row(
        modifier = Modifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically
      ) {
          Box(
           modifier = Modifier
                      .size(20.dp)
                      .background(Color.Blue)
                      .clickable{isNextVisible = !isNextVisible},
          )
          if (isNextVisible) {
                Box(
                   modifier = Modifier
                       .size(30.dp)
                       .background(Color.Red)
                )
          }
        }
        Text(
              modifier = Modifier.fillMaxWidth(1f),
              text = "this is a long text that needs to be truncated. this is a long text that needs to be truncated. this is a long text that needs to be truncated. ",
              maxLines = 1,
              textAlign = TextAlign.Center,
              overflow = TextOverflow.Ellipsis,
        )
 }

when the blue box is pressed repeatedly, the red box appears and disappears.

On recomposition, the text inside text composable is shifting to the right each time. Is this a bug in compose?

I tried textAlign = TextAlign.Start, but there is no issue with this.. However, with TextAlign.Center and TextAlign.End, the text is being shifted right on each composition.

It seems this is an issue only when we are using TextOverflow.Ellipsis.. With other TextOverflows the text is not shifting..

0

There are 0 best solutions below