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

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 の余白があります。 合計の増加値は 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