アイテムの動作を設定する

Modifier.flex を使用して、FlexBox 内のアイテムのサイズ、順序、配置の変更方法を制御します。

アイテムのサイズ

basis、grow、shrink の各関数を使用して、アイテムのサイズを制御します。

FlexBox {
    RedRoundedBox(
        modifier = Modifier.flex {
            basis(FlexBasis.Auto)
            grow(1.0f)
            shrink(0.5f)
        }
    )
}
FlexBoxSnippets.kt

初期サイズを設定する

basis を使用して、余白が分配される前のアイテムの初期サイズを指定します。これはアイテムの推奨サイズと考えることができます。

値の型	動作	コード スニペット 注: ボックスの最大固有サイズは 100dp です。	コンテナの幅 600dp を使用する例
Auto （デフォルト）	アイテムの最大固有サイズを使用します。 たとえば、Text コンポーザブルの最大固有幅は、すべてのテキストを 1 行に収めたときの幅です。折り返しは行われません。	FlexBox { RedRoundedBox( Modifier.flex { basis(FlexBasis.Auto) } ) BlueRoundedBox( Modifier.flex { basis(FlexBasis.Auto) } ) } FlexBoxSnippets.kt
dp を解決	Dp 単位の固定サイズ。	FlexBox { RedRoundedBox( Modifier.flex { basis(200.dp) } ) BlueRoundedBox( Modifier.flex { basis(100.dp) } ) } FlexBoxSnippets.kt
割合	コンテナサイズの割合。	FlexBox { RedRoundedBox( Modifier.flex { basis(0.7f) } ) BlueRoundedBox( Modifier.flex { basis(0.3f) } ) } FlexBoxSnippets.kt

基準値がアイテムの固有の最小サイズよりも小さい場合は、代わりに固有の最小サイズが使用されます。たとえば、単語を含む Text アイテムの表示に 50dp が必要で、かつ basis = 10.dp もある場合、50dp の値が使用されます。

スペースがある場合にアイテムを拡大する

grow を使用して、余分なスペースがある場合にアイテムが拡大する量を指定します。これは、すべてのアイテムの basis 値が合計された後、FlexBox コンテナに残っているスペースです。grow の値は、兄弟要素と比較して、特定の子要素が追加のスペースをどの程度受け取るかを示します。デフォルトでは、アイテムは拡大されません。

次の例は、3 つの子アイテムを持つ FlexBox を示しています。それぞれ基準値は 100dp です。最初の子の grow 値は正です。grow 値を持つ子要素が 1 つしかないため、実際の値は関係ありません。正の値であれば、子要素はすべての余白を受け取ります。

これらの画像は、コンテナのサイズが 600dp の場合の FlexBox の動作を示しています。

FlexBox { RedRoundedBox( title = "400dp", modifier = Modifier.flex { grow(1f) } ) BlueRoundedBox(title = "100dp") GreenRoundedBox(title = "100dp") } FlexBoxSnippets.kt

各子のベース値は 100dp です。300dp の余分なスペースがあります。 子 1 は 300dp ずつ拡大して、余ったスペースを埋めます。

次の例では、コンテナのサイズと basis のサイズは同じです。違いは、各子に異なる grow 値があることです。

FlexBox { RedRoundedBox( title = "150dp", modifier = Modifier.flex { grow(1f) } ) BlueRoundedBox( title = "200dp", modifier = Modifier.flex { grow(2f) } ) GreenRoundedBox( title = "250dp", modifier = Modifier.flex { grow(3f) } ) } FlexBoxSnippets.kt

各子のベース値は 100dp です。300dp の余分なスペースがあります。 合計の grow 値は 6 です。 子 1 は（1 / 6）× 300 = 50dp 増加します。 子 2 は（2 / 6）× 300 = 100dp 増加します。 Child 3 は（3 / 6）* 300 = 150dp 増加します。

容量が不足している場合にアイテムを縮小する

shrink を使用して、FlexBox コンテナにすべてのアイテムを収めるだけのスペースがない場合に、アイテムがどの程度縮小するかを指定します。shrink は grow と同じように動作しますが、余白をアイテムに分配するのではなく、スペース不足をアイテムに分配します。shrink の値は、アイテムが受け取るスペース不足の量、つまりアイテムが縮小する量を指定します。デフォルトでは、アイテムの shrink 値は 1f で、均等に縮小されます。

次の例は、同じテキストを含む 2 つの Text コンポーザブルを示しています。最初の子の縮小値は 1f です。これは、すべてのスペース不足を吸収するように縮小することを意味します。

FlexBox {
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelRed)
            .flex { shrink(1f) }
    )
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelBlue)
            .flex { shrink(0f) }
    )
}
FlexBoxSnippets.kt

コンテナのサイズが縮小すると、子 1 も縮小します。

コンテナサイズ	FlexBox UI
700dp
500dp
450dp

アイテムの配置

alignSelf を使用して、アイテムがクロス軸に沿ってどのように配置されるかを制御します。これにより、このアイテムのコンテナの alignItems プロパティがオーバーライドされます。FlexBox コンテナの動作を継承する Auto が追加されただけで、可能な値はすべて同じです。

たとえば、この FlexBox では、alignItems が Start に設定され、クロス軸の配置をオーバーライドする 5 つの子があります。

FlexBox(
    config = {
        alignItems(FlexAlignItems.Start)
    }
) {
    RedRoundedBox()
    BlueRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Center) })
    GreenRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.End) })
    PinkRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Stretch) })
    OrangeRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Baseline) })
}
FlexBoxSnippets.kt

Item order

デフォルトでは、FlexBox はコードで宣言された順序でアイテムをレイアウトします。この動作をオーバーライドするには、order を使用します。

order のデフォルト値は 0 で、FlexBox はこの値に基づいてアイテムを昇順で並べ替えます。order の値が同じアイテムは、宣言された順序でレイアウトされます。負と正の order 値を使用して、アイテムの宣言場所を変更せずに、レイアウトの先頭または末尾に移動します。

次の例は、2 つの子アイテムを示しています。1 つ目はデフォルトの order が 0 で、2 つ目は順序が -1 です。並べ替え後、子 1 は子 2 の後に表示されます。

FlexBox {
    // Declared first, but will be placed after visually
    RedRoundedBox(
        title = "World"
    )

    // Declared second, but will be placed first visually
    BlueRoundedBox(
        title = "Hello",
        modifier = Modifier.flex {
            order(-1)
        }
    )
}
FlexBoxSnippets.kt