Android:Compose:Modifier.weightについてのメモ

内容

Modifier.weightの使い方について迷った箇所があったのでまとめておく

Modifier.weightの仕組み

• ある範囲内（Row, Columnなど）に並べられたComposableの幅を比率で確保するための仕組み
• weightを付けなかったComposableはそのまま描写される
• weightのついたパーツの幅は、全体の幅からweightのついていないものの幅を引いたものの中で決定される

例

テキストの後ろにアイコンを配置する

要件

• テキストのすぐ後ろにアイコンを表示する
• テキストが短い場合にアイコンが離れた位置（右端）に出ないようにする
• テキストが長い場合にアイコンが消えないこと
• テキストが長い場合に ... を表示する

Row(){
    Text(modifier = Modifier.weight(1f, fill = false), overflow=TextOverflow.Ellipsis)
    Image(
        painger = painterResource(id= R.drawable.icon),
        modifier = Modifier.size(16.dp)
    )
}

ポイント

• テキストとアイコンが並ぶようRowで囲む
• テキストに押し出されてアイコンが消えないよう、TextのModifierに weight(1f)を付ける
• テキストが短い場合にはTextの幅が短くなるよう weight(fill = false) を付ける（defaultはtrueのため）
• アイコン幅を固定で確保するために ImageのModifierには weightを付けない
• テキストが長い場合に備えて overflow=TextOverflow.Ellipsis をセット