設定項目行為

使用 Modifier.flex 控制項目在 FlexBox 內的大小、順序和對齊方式。

商品尺寸

使用 basis、grow 和 shrink 函式控制項目大小。

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

設定初始大小

使用 basis 指定項目在分配任何額外空間前的初始大小。您可以將其視為項目的「偏好」大小。

值類型

行為

程式碼片段

注意：方塊的固有大小上限為 100dp

使用容器寬度 600dp 的範例

Auto

(預設)

使用項目的最大固有大小。

舉例來說，Text 可組合項目的最大固有寬度，是單行中所有文字的寬度，不含換行。

 
FlexBox {
    RedRoundedBox(
        Modifier.flex { basis(FlexBasis.Auto) }
    )
    BlueRoundedBox(
        Modifier.flex { basis(FlexBasis.Auto) }
    )
}
 使用基準「自動」時，項目會根據其固有大小調整大小。

已修正dp

固定大小 (以 dp 為單位)。

 
FlexBox {
    RedRoundedBox(
        Modifier.flex { basis(200.dp) }
    )
    BlueRoundedBox(
        Modifier.flex { basis(100.dp) }
    )
}
 使用基準將項目大小設為固定 dp 值。

百分比

容器大小的百分比。

 
FlexBox {
    RedRoundedBox(
        Modifier.flex { basis(0.7f) }
    )
    BlueRoundedBox(
        Modifier.flex { basis(0.3f) }
    )
}
 使用基準，將項目大小設為容器大小的百分比。

如果基準值小於項目的固有最小大小，則會改用固有最小大小。舉例來說，如果包含字詞的 Text 項目需要 50dp 才能顯示，但同時具有 basis = 10.dp，則會使用 50dp 的值。

有空間時放大項目

使用 grow 指定項目在有額外空間時的放大程度。這是 FlexBox 容器中，所有項目的 basis 值加總後剩餘的空間。grow 值表示特定子項相對於其同層級項目可獲得多少額外空間。根據預設，項目不會放大。

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

圖片顯示容器大小為 600dp 時，FlexBox 的行為。

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

每個子項的基準值為 100dp。有 300dp 的額外空間。

在 600dp 容器中，三個項目的基準各為 100dp，尚未放大。

子項 1 增加 300dp，填滿額外空間。

第一個項目會放大，填滿 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) }
    )
}

每個子項的基準值為 100dp。有 300dp 的額外空間。

在 600dp 容器中，有三個項目，每個項目的基準為 100dp，在成長之前，具有不同的成長值。

總放大值為 6。

子項 1 增加 (1 / 6) * 300 = 50dp

子項 2 增加 (2 / 6) * 300 = 100dp

子項 3 增加 (3 / 6) * 300 = 150dp

項目會根據相對成長值放大，填滿 300 dp 的額外空間。

空間不足時縮小項目

當 FlexBox 容器空間不足以容納所有項目時，請使用 shrink 指定項目縮小的程度。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) }
    )
}

容器大小縮小時，子項 1 也會縮小。

容器大小

FlexBox UI

700dp

 700 dp 容器中的兩個項目。

500dp

 容器大小縮減至 500dp 時，第一個項目會縮小。

450dp

 容器大小縮減至 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) })
}

五個大小不一的子項覆寫 alignItems 屬性。

項目順序

根據預設，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)
        }
    )
}

兩個圓角方塊，第一個包含「Hello」文字，第二個包含「World」文字。

上一頁
設定容器行為
下一頁
開始使用自適應應用程式