Jetpack ComposeのRow：概要、composableプロパティ、動作仕様

Jetpack ComposeのRowとは

Rowは、子要素を水平方向のシーケンスに配置するcomposable関数です。Composeのレイアウト階層において、RowはColumnおよびBoxと並んで基本コンテナの位置を占めます。

Rowは寸法を指定する必要はありません — 内容に応じて自動的に調整されます。Rowの幅は、Modifier.fillMaxWidthまたは固定サイズが指定されていない限り、パディングを含む子要素の幅の合計に等しくなります。

Rowの子要素は、コンテナ内での位置に影響を与える独自の修飾子を持つことができます。たとえば、Modifier.weightを使用すると、要素が使用可能なスペースの比例部分を占有できます。

Android Developers Blog、2024によると、Rowは子要素を順次処理し、Composeの測定ルールに基づいてサイズを計算します：最初にweightなしの要素が測定され、次に残りのスペースがweightありの要素間に分配されます。

Rowの構文と基本シグネチャ

Rowの基本シグネチャには、modifierパラメータ、horizontalArrangement、verticalAlignmentが含まれます。すべての子要素は、最終的なcontentラムダブロックに渡されます。

@Composable
fun RowExample() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(text = "1")
        Text(text = "2")
        Text(text = "3")
    }
}

Rowのプロパティ：horizontalArrangementとverticalAlignment

horizontalArrangementパラメータは、Row内で子要素が水平軸に沿ってどのように分布するかを決定します。ArrangementクラスのStart、End、Center、SpaceBetween、SpaceAround、SpaceEvenlyの値が利用可能です。

Arrangement.Startは要素をコンテナの先頭に配置し、Arrangement.Endは末尾に、Arrangement.Centerは中央に配置します。これらの値は、CSS Flexboxのjustify-contentプロパティと同様に機能します。

Arrangement.SpaceBetweenは、最初の要素を先頭に、最後の要素を末尾に配置し、残りの要素の間に均等な間隔を空けて分布します。Material Design Guidelines、2025によると、SpaceBetweenはツールバーやナビゲーション行に最適です。

verticalAlignmentパラメータは、要素を垂直方向に整列します。Alignment.Top、Alignment.CenterVertically、Alignment.Bottomの値が利用可能です。このプロパティは、Rowの要素の高さが異なる場合（たとえば、複数行のテキストの横にあるアイコン）に便利です。

Arrangement値の表

Modifier.weightによるスペース配分

Modifier.weightは、RowとColumn内でのみ使用可能な修飾子で、指定された値に比例して子要素間で使用可能なスペースを分配します。1つの要素の重みが1.0fで別の要素が2.0fの場合、2番目の要素は2倍のスペースを占有します。

weightなしの要素は、その内容に必要なスペースを占有します。残りのスペースは、weightありの要素間でその重みに比例して分配されます。この動作は、CSS Flexboxのflex-growプロパティに似ています。

Android Developer Documentation、2025によると、weightはRow、Column、BoxWithConstraints内でのみ機能します。Rowでweightを使用する場合、すべての子要素は2パスで測定されます：最初にweightなしの要素、次にweightありの要素です。

@Composable
fun WeightExample() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Start
    ) {
        Text(
            text = "左",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "右")
    }
}

Rowのコード例

最初の例は、アイコンとテキストを使用したRowを示しています — 連絡先リストや設定の典型的なシナリオです。IconとTextは、verticalAlignmentを中央に設定してRowにラップされています。

@Composable
fun IconWithText() {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.padding(8.dp)
    ) {
        Icon(
            imageVector = Icons.Default.Favorite,
            contentDescription = "Favorite"
        )
        Spacer(modifier = Modifier.width(8.dp))
        Text(text = "お気に入りに追加")
    }
}

2番目の例は、ボタンと均等分布を使用したRowを示しています。SpaceEvenlyは、すべてのボタンとコンテナの端の間で均等な間隔を保証します。

@Composable
fun ButtonRow() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Button(onClick = {}) { Text("キャンセル") }
        Button(onClick = {}) { Text("保存") }
    }
}

3番目の例は、Card内で評価を表示するためのRowです。Modifier.weightを使用したネストされたRowにより、評価星と数値が固定スペースを占有できます。

@Composable
fun RatingRow(rating: Float) {
    Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = "評価：",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "$rating / 5.0")
    }
}

アダプティブレイアウトにおけるRowの特徴

Rowは、アダプティブレイアウトにおいて幅の制御が必要です。Rowの内容が利用可能な画面幅を超えると、要素がコンテナの境界からはみ出す可能性があります。これを防ぐには、Modifier.horizontalScrollを使用するか、Columnに切り替えてください。

RowをModifier.weightと組み合わせる場合、親RowにfillMaxWidthを設定することが重要です — そうしないと、weightが存在しないスペースを分配します。Material Design Guidelines、2025によると、fillMaxWidthなしでweightを使用したRowは無効な構成と見なされます。

アダプティブインターフェースの場合、RowをBoxと組み合わせるか、Arrangement.SpaceBetweenを使用してさまざまな画面サイズで要素を自動的に分布することをお勧めします。これにより、メディアクエリなしで柔軟性が得られます。

• Modifier.horizontalScroll — Rowがあふれたときにスクロールを追加
• Modifier.weight — スペースを比例配分
• Arrangement.SpaceBetween — 端を固定したアダプティブ配分