可変長のテキストを含むRowではSpacer(Modifier.weight(1f))やArrangement.SpaceBetweenと指定してはいけない

## TL;DR
可変長のテキストに対して`Modifier.weight(1f)`を指定してください。
```kotlin
Row(modifier) {
    Text(
        text = text,
        modifier = Modifier.weight(1f),  // Or  Modifier.weight(1f, fill = false)
    )
    Icon(
        imageVector = Icons.Filled.CheckCircle,
        contentDescription = "icon",
        modifier = Modifier.size(48.dp)
    )
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53293/d3dac557-0940-0e7b-2659-f281df222bfa.png)


## 
左端にテキストがあり、右端には固定長のアイコンがあるRowを作りたいとします。（よくあるレイアウトですね）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53293/d1243b59-e8b1-0782-4e84-dd723d40bfe0.png)

これは次のように、Rowの子に`Spacer(Modifier.weight(1f))`を追加したり、Rowに`horizontalArrangement = Arrangement.SpaceBetween`を設定することで実装することができます。
```kotlin
@Composable
fun Row1(
    text: String,
    modifier: Modifier = Modifier,
) {
    Row(modifier = modifier) {
        Text(
            text = text,
            modifier = Modifier.border(1.dp, Color.Blue)
        )
        Spacer(Modifier.weight(1f))
        Icon(
            imageVector = Icons.Filled.CheckCircle,
            contentDescription = "icon",
            modifier = Modifier.size(48.dp)
        )
    }
}
```

```kotlin
@Composable
fun Row2(
    text: String,
    modifier: Modifier = Modifier,
) {
    Row(
        horizontalArrangement = Arrangement.SpaceBetween,
        modifier = modifier,
    ) {
        Text(
            text = text,
            modifier = Modifier.border(1.dp, Color.Blue)
        )
        Icon(
            imageVector = Icons.Filled.CheckCircle,
            contentDescription = "icon",
            modifier = Modifier.size(48.dp)
        )
    }
}
```

一見すると良さそうに見えます。
```kotlin
Column(modifier) {
    Row1(text = "text", modifier = Modifier.fillMaxWidth())
    Row2(text = "text", modifier = Modifier.fillMaxWidth())
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53293/87a646ee-476f-0ebb-dcbc-e216252109e4.png)


次のように長いテキストを設定した場合はどうなるでしょうか。
```kotlin
Column(modifier) {
    Row1(text = "text".repeat(16), modifier = Modifier.fillMaxWidth())
    Row2(text = "text".repeat(16), modifier = Modifier.fillMaxWidth())
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53293/6b18e6f9-351f-e8ae-b819-30aa9a92792c.png)

アイコンが隠れてしまいました。今回は説明のために極端に長いテキストを用意しましたが、例えばユーザー設定でフォントサイズを大きくしたり、端末の横幅が小さい場合においても同じことが発生し得ます。

## なぜこうなってしまうのか
横幅の計測順序が原因です。
  1. 長いテキストの幅を計測する **（ここで既に画面が埋まってしまう）**
  2. アイコンの幅を計測する
  3. 余った幅をSpacerで埋める（Row2の場合）

## どうすればいいのか
次のように長いテキストに対して`Modifier.weight(1f)`を指定します。
```kotlin
Row(modifier) {
    Text(
        text = text,
        modifier = Modifier
            .weight(1f)
            .border(1.dp, Color.Blue),
    )
    Icon(
        imageVector = Icons.Filled.CheckCircle,
        contentDescription = "icon",
        modifier = Modifier.size(48.dp)
    )
}
```
こう書いた場合、先にアイコンが計測され、余った幅を長いテキストが埋める形になるので、意図した通りに表示できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53293/7e123ef7-b21d-fa9a-2413-9639b0510d05.png)

## 参考
https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).weight(kotlin.Float,kotlin.Boolean)