設定項目行為

使用 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) }
    )
}
 使用基礎 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 指定項目在有額外空間時的成長幅度。這是指所有項目的 basis 值加總後，FlexBox 容器中剩餘的空間。grow 值表示相較於同層級元素，指定子項將獲得多少額外空間。根據預設，項目不會成長。

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

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

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

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

成長前，600 dp 容器中的三個項目，每個項目都以 100 dp 為基準。

子項 1 會成長 300dp，填滿額外空間。

第一個項目會擴展，填滿 300 dp 的額外空間。

在下列範例中，容器大小和 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 的額外空間。

三個項目各以 100 dp 為基準，位於 600 dp 的容器中，成長前具有不同的成長值。

總成長值為 6。

孩子 1 的成長量為 (1 / 6) * 300 = 50dp

孩子 2 的成長量為 (2 / 6) * 300 = 100dp

孩子 3 的成長量為 (3 / 6) * 300 = 150dp

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

空間不足時縮小項目

使用 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) }
    )
}

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

容器大小

FlexBox UI

700dp

 700 dp 容器中的兩個項目。

500dp

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

450dp

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

項目對齊

使用 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。排序後，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)
        }
    )
}

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

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