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

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

basis 値がアイテムの固有の最小サイズより小さい場合は、代わりに固有の最小サイズが使用されます。たとえば、単語を含む 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 拡大します。 子 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

アイテムの順序

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

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

次の例は、2 つの子アイテムを示しています。1 つ目のデフォルトの order は 0 で、2 つ目の順序は -1 です。並べ替え後、Child 1 は Child 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