設定項目行為

使用 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 可組合函式的最大內建寬度是單行上所有文字的寬度，不會換行。	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 值表示相較於同層級元素，指定子項將獲得多少額外空間。根據預設，項目不會成長。

以下範例顯示含有三個子項目的 FlexBox。每個值都有 100dp 的基礎值。第一個子項目的 grow 值為正數。由於只有一個子項具有 grow 值，因此實際值無關緊要，只要是正數，子項就會獲得所有額外空間。

圖片顯示容器大小為 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，表示項目會等比例縮小。

以下範例顯示兩個具有相同文字的 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 屬性。這個屬性具有所有相同可能值，並新增了 Auto，可繼承 FlexBox 容器的行為。

舉例來說，這個 FlexBox 的 alignItems 設為 Start，且有五個子項會覆寫交叉軸對齊方式。

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 的預設值為零，FlexBox 會根據這個值以遞增順序排序項目。凡是 order 值相同的項目，都會按照宣告順序排列。使用負值和正值 order 將項目移至版面配置的開頭或結尾，而不變更項目的宣告位置。

以下範例顯示兩個子項。第一個的預設值為零 order，第二個的順序為 -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