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

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 拡大します。 子 3 は (3 / 6) * 300 = 150dp 拡大します。

スペースが不足している場合にアイテムを縮小する

shrink を使用して、FlexBox コンテナにすべてのアイテムを配置するのに十分なスペースがない場合に、アイテムを縮小する量を指定します。shrink は grow と同じように機能しますが、アイテムに 余分なスペース を分配する代わりに、スペース不足 がアイテムに分配されます。shrink 値は、アイテムが受け取るスペース不足の量、つまりアイテムが縮小する量を指定します。デフォルトでは、アイテムの shrink 値は 1f であり、均等に縮小されます。

次の例は、同じテキストを持つ 2 つの Text コンポーザブルを示しています。最初の子の shrink 値は 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 プロパティ がオーバーライドされます。可能な値はすべて同じですが、Auto が追加されています。これは FlexBox コンテナの動作を継承します。

たとえば、この 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 です。並べ替え後、子 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