共用方式為

FlexLayout

  • 發行項

Browse sample. 流覽範例

.NET MAUI FlexLayout.

.NET 多平臺應用程式 UI （.NET MAUI） FlexLayout 是一種版面配置，可在堆疊中水準和垂直排列其子系，而且如果有太多子系無法放入單一資料列或資料行中，也可以包裝其子系。 此外， FlexLayout 還可以控制方向和對齊方式，並適應不同的螢幕大小。 FlexLayout 是以級聯樣式表 （CSS） 彈性方塊配置模組 為基礎。

類別 FlexLayout 會定義下列屬性：

  • AlignContent型 FlexAlignContent 別為 的 ，決定版面配置引擎在多行配置子系之間和周圍散發空間的方式。 此屬性的預設值為 Stretch。 如需詳細資訊，請參閱 AlignContent 。
  • AlignItems型 FlexAlignItems 別為 的 ，表示版面配置引擎如何沿著交叉軸在子系之間和周圍分配空間。 此屬性的預設值為 Stretch。 如需詳細資訊，請參閱 AlignItems 。
  • Direction型 FlexDirection 別為 的 ，定義子系的方向和主軸。 此屬性的預設值為 Row。 如需詳細資訊，請參閱 方向 。
  • JustifyContent型 FlexJustify 別為 的 ，指定沿著主軸在子系之間和周圍分佈空間的方式。 此屬性的預設值為 Start。 如需詳細資訊，請參閱 JustifyContent 。
  • Position型 FlexPosition 別為 的 ，決定子系的位置是彼此相對的，還是使用固定值。 此屬性的預設值為 Relative。
  • Wrap型 FlexWrap 別為 的 ，控制子系是在單行或多行中配置。 此屬性的預設值為 NoWrap。 如需詳細資訊，請參閱 包裝 。
  • AlignSelf型 FlexAlignSelf 別為 的 ，這是附加屬性，表示配置引擎如何在子系之間和周圍分配跨軸上特定子系的空間。 此屬性的預設值為 Auto。 如需詳細資訊，請參閱 AlignSelf 。
  • Basis型 FlexBasis 別為 的 ，這是附加屬性，定義子系的初始主要大小，再根據其他屬性值散發可用空間。 此屬性的預設值為 Auto。 如需詳細資訊，請參閱 基礎 。
  • Grow型 float 別為 的 ，這是附加屬性，指定子系在主軸上應使用的可用空間量。 此屬性的預設值為 0.0。 驗證回呼可確保當屬性設定時，其值大於或等於 0。 如需詳細資訊，請參閱 成長 。
  • Order型 int 別為 的 ，這是附加屬性，決定子系應該在容器中的其他子系之前或之後配置。 這個屬性的預設值為 0。 如需詳細資訊，請參閱 Order 。
  • Shrink型 float 別為 的 ，這是一個附加屬性，可控制子系應如何壓縮，讓所有子系都能放入容器內。 此屬性的預設值為 1.0。 驗證回呼可確保當屬性設定時，其值大於或等於 0。 如需詳細資訊，請參閱 壓縮 。

這些屬性是由 BindableProperty 物件所支援，這表示屬性可以是資料系結和樣式的目標。

重要

當 中的專案 FlexLayout 排列在資料行中時， FlexLayout 具有垂直 主軸 和水準 交叉軸 。 當 中的專案 FlexLayout 以資料列排列時， FlexLayout 具有水準 主軸 和垂直 交叉軸 。

FlexLayout 和其子系可以使用級聯樣式表 （CSS） 部分設定樣式。 如需詳細資訊，請參閱 使用級聯樣式表設定應用程式樣式表 （CSS） 的樣式。

方向和對齊方式

Direction、 Wrap 、 JustifyContent 、 AlignItems 、 AlignContent 和 Position 可系結屬性可以在 上 FlexLayout 設定，以控制所有子系的方向和對齊方式。

方向

Direction類型的 FlexDirection 屬性會定義子系的方向和主軸。 FlexDirection 列舉會定義下列成員：

  • Column，表示子系應該垂直堆疊。
  • ColumnReverse （或 XAML 中的「資料行反向」，表示子系應該以反向順序垂直堆疊。
  • Row，表示子系應該水準堆疊。 此為 Direction 屬性的預設值。
  • RowReverse （或 XAML 中的「資料列反向」，表示子系應該以反向順序水準堆疊。

Direction當 屬性設定為 Column 、 或 ColumnReverse 時，主軸會是 Y 軸，而專案將會垂直堆疊。 Direction當 屬性設定為 Row 、 或 RowReverse 時，主軸會是 X 軸，而子系則會水準堆疊。

注意

在 XAML 中，您可以使用小寫、大寫或混合大小寫的列舉成員名稱來指定此屬性的值，也可以使用括弧中顯示的兩個額外字串。

換行

Wrap類型的 FlexWrap 屬性會控制子系是在單行或多行中配置。 FlexWrap 列舉會定義下列成員：

  • NoWrap，表示子系是在單一行中配置。 此為 Wrap 屬性的預設值。
  • Wrap，表示如有需要，專案會配置在多行中。
  • Reverse （或 XAML 中的「wrap-reverse」），這表示如有需要，專案會以反向順序以多行方式配置。

Wrap當 屬性設定為 NoWrap 且主軸受到限制，而且主軸寬度或高到足以容納所有子系時，會 FlexLayout 嘗試使專案更小。 您可以使用附加的可系結屬性來控制子系的 Shrink 壓縮因數。

當 屬性 Wrap 設定為 Wrap 或 WrapReverse 時， AlignContent 可以使用 屬性來指定線條的分佈方式。

JustifyContent

JustifyContent型 FlexJustify 別 的 屬性會指定沿著主軸在子系之間和周圍分佈空間的方式。 FlexJustify 列舉會定義下列成員：

  • Start （或 XAML 中的「flex-start」），這表示子系應該在開頭對齊。 此為 JustifyContent 屬性的預設值。
  • Center，表示子系應該對齊中心。
  • End （或 XAML 中的「flex-end」），這表示子系應該對齊結尾。
  • SpaceBetween （或 XAML 中的「空格之間」，表示子系應該平均分佈，第一個子系在開頭，最後一個子系在結尾。
  • SpaceAround （或 XAML 中的「空間四周」，這表示子系應該平均分佈，第一個和最後一個子系具有半大小的空間。
  • SpaceEvenly，表示子系應該平均分佈，所有子系周圍都有相等的空間。

AlignItems

AlignItems型 FlexAlignItems 別 的 屬性會指出配置引擎如何沿著交叉軸在子系之間和周圍分配空間。 FlexAlignItems 列舉會定義下列成員：

  • Stretch，表示應該延展子系。這是 屬性的 AlignItems 預設值。
  • Center，表示子系應該對齊中心。
  • Start （或 XAML 中的「flex-start」），這表示子系應該在開頭對齊。
  • End （或 XAML 中的「flex-end」），這表示子系應該對齊結尾。

這是兩個屬性之一，表示子系在交叉軸上的對齊方式。 在每個資料列內，子系會延展或對齊每個專案的開始、置中或結尾。

對於任何個別子系， AlignItems 可以使用附加的可系結屬性覆寫 AlignSelf 設定。

AlignContent

AlignContent型 FlexAlignContent 別 的 屬性會決定配置引擎在多行配置子系之間和周圍分配空間的方式。 FlexAlignContent 列舉會定義下列成員：

  • Stretch，表示應該延展子系。這是 屬性的 AlignContent 預設值。
  • Center，表示子系應該對齊中心。
  • Start （或 XAML 中的「flex-start」），這表示子系應該在開頭對齊。
  • End （或 XAML 中的「flex-end」），這表示子系應該對齊結尾。
  • SpaceBetween （或 XAML 中的「空格之間」，表示子系應該平均分佈，第一個子系在開頭，最後一個子系在結尾。
  • SpaceAround （或 XAML 中的「空間四周」，這表示子系應該平均分佈，第一個和最後一個子系具有半大小的空間。
  • SpaceEvenly，表示子系應該平均分佈，所有子系周圍都有相等的空間。

當只有一個資料列或資料行時，屬性 AlignContent 就沒有作用。

子系對齊和調整大小

AlignSelf、 Order 、 Basis 、 Grow 和 Shrink 附加的可系結屬性可以在 的 FlexLayout 子系上設定，以控制子方向、對齊和調整大小。

AlignSelf

AlignSelf類型的 FlexAlignSelf 屬性會指出配置引擎如何在子系之間和周圍分配跨軸上特定子系的空間。 FlexAlignSelf 列舉會定義下列成員：

  • Auto，表示子系應根據其父系的對齊值進行對齊。 此為 AlignSelf 屬性的預設值。
  • Stretch，表示子系應該延展。
  • Center，表示子系應該對齊中央。
  • Start （或 XAML 中的「flex-start」），這表示子系應該在開頭對齊。
  • End （或 XAML 中的「flex-end」），這表示子系應該在結尾對齊。

對於 的任何個別子系 FlexLayout ，這個屬性會 AlignItems 覆寫 上 FlexLayout 設定的屬性。 使用 AlignItems 設定之 Auto 方法的預設設定。

在 XAML 中，這個屬性是在子系上設定，而不會參考其 FlexLayout 父系：

<Label FlexLayout.AlignSelf="Center"
       ... />

對等的 C# 程式碼為：

Label label = new Label();
FlexLayout.SetAlignSelf(label, FlexAlignSelf.Center);

訂單

Order類型的 int 屬性可讓您變更 的子系 FlexLayout 排列順序。 這個屬性的預設值為 0。

通常，子系會依新增至 的順序排列 FlexLayout 。 不過，您可以將此屬性設定為一或多個子系上的非零整數值，以覆寫此順序。 然後會 FlexLayout 根據其屬性值來排列其 Order 子系。 具有相同屬性值的 Order 子系會依新增至 FlexLayout 的順序排列。

Basis

Basis類型的 FlexBasis 屬性會定義主軸上子系的初始大小，然後根據其他屬性值散發可用空間。 這個屬性所指定的值是沿著父 FlexLayout 代 主軸的大小。 因此，當子系以資料列排列時，這個屬性會指出子系的寬度，或子系在資料行中排列子系時的高度。 這個屬性稱為 basis ，因為它會指定所有後續版面配置的基礎大小。

此 FlexBasis 類型是一種結構，可讓大小以裝置獨立單位指定，或以的大小 FlexLayout百分比指定。 屬性的 Basis 預設值為 Auto，這表示會使用子系要求的寬度或高度。

在 XAML 中，您可以針對裝置獨立單位的大小使用數位：

<Label FlexLayout.Basis="40"
       ... />

對等的 C# 程式碼為：

FlexLayout.SetBasis(label, 40);

在 XAML 中，可以指定百分比，如下所示：

<Label FlexLayout.Basis="25%"
       ... />

對等的 C# 程式碼為：

FlexLayout.SetBasis(label, new FlexBasis(0.25f, true));

建 FlexBasis 構函式的第一個自變數是必須介於 0 到 1 範圍內的分數 float 值。 第二個自變數表示大小是相對的，而不是絕對的。

成長

Grow類型的 float屬性會指定子系在主軸上使用的可用空間量。 此屬性的預設值為 0.0，且其值必須大於或等於 0。

當 Grow 屬性設定為 NoWrap ，且子系的寬度總計小於 的寬度FlexLayout，或子系的數據行高度比 FlexLayout短時Wrap，就會使用 屬性。 屬性 Grow 會指出如何在子系之間分配剩餘空間。 如果單一子系得到正 Grow 值，則該子系會佔用所有剩餘的空間。 或者，剩餘的空間也可以配置在兩個或多個子系之間。

壓縮

Shrink類型的 float屬性會控制子系應該壓縮的方式，讓所有子系都能放入容器內。 此屬性的預設值為 1.0，且其值必須大於或等於 0。

當 Shrink 屬性設定為 NoWrap ，且子系數據列的匯總寬度大於 的寬度FlexLayout時，會使用 Wrap 屬性，或子系之單一數據行的匯總高度大於的高度FlexLayout。 通常， FlexLayout 會藉由限制其大小來顯示這些子系。 屬性 Shrink 可以指出要以完整大小顯示哪些子系的優先順序。

提示

和 GrowShrink 值都可以設定為容納匯總子大小有時可能小於或有時大於的大小 FlexLayout的情況。

範例

下列範例示範的 FlexLayout常見用法。

Stack

FlexLayout可以取代 StackLayout：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutDemos.Views.SimpleStackPage"
             Title="Simple Stack">    
    <FlexLayout Direction="Column"
                AlignItems="Center"
                JustifyContent="SpaceEvenly">        
        <Label Text="FlexLayout in Action"
               FontSize="18" />
        <Image Source="dotnet_bot_branded.png"
               HeightRequest="300" />
        <Button Text="Do-Nothing Button" />
        <Label Text="Another Label" />
    </FlexLayout>
</ContentPage>

在此範例中 Direction ，屬性會設定為 Column，這會使 的 FlexLayout 子系排列在單一數據行中。 屬性 AlignItems 設定為 Center，這會導致每個子系水準置中。 屬性 JustifyContent 會設定為 SpaceEvenly ，以平均配置所有子系之間的所有剩餘垂直空間，高於第一個子系，以及最後一個子系下方：

Vertically oriented .NET MAUI FlexLayout.

注意

AlignSelf附加屬性可用來覆寫AlignItems特定子系的屬性。

包裝專案

FlexLayout可以將其子系包裝至其他數據列或數據行：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutDemos.Views.PhotoWrappingPage"
             Title="Photo Wrapping">
    <Grid>
        <ScrollView>
            <FlexLayout x:Name="flexLayout"
                        Wrap="Wrap"
                        JustifyContent="SpaceAround" />
        </ScrollView>
        ...
    </Grid>
</ContentPage>

在此範例中 Direction ，未設定 的 FlexLayout 屬性，因此其預設設定 Row為 ，這表示子系會以數據列排列，而主軸為水準。 屬性 Wrap 設定為 Wrap，如果有太多子系無法放入數據列，則會導致子系換行至下一個數據列。 屬性 JustifyContent 會設定為 SpaceAround ，以配置主軸上所有剩餘空間，讓每個子系被相同的空間量包圍：

Horizontally wrapping .NET MAUI FlexLayout.

此範例的程式代碼後置檔案會擷取相片集合，並將其新增至 FlexLayout。

此外， FlexLayout 是的 ScrollView子系。 因此，如果頁面上有太多數據列無法容納，則 ScrollView 具有的預設 Orientation 屬性 Vertical 並允許垂直捲動。

頁面版面配置

網頁設計中有一種標準版面配置，稱為 聖杯 ，因為它是非常理想的版面配置格式，但通常很難以完美實現。 版面配置是由頁面頂端的頁首和底部的頁尾所組成，這兩者都延伸到頁面的完整寬度。 佔據頁面的中心是主要內容，但通常有內容左邊的欄式功能表和補充資訊（有時稱為一個 邊 區）。右側。 此版面配置可以使用 來實現 FlexLayout。

下列範例示範使用巢狀結構在另一個 FlexLayout 配置中實作此配置：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutDemos.Views.HolyGrailLayoutPage"
             Title="Holy Grail Layout">

    <FlexLayout Direction="Column">

        <!-- Header -->
        <Label Text="HEADER"
               FontSize="18"
               BackgroundColor="Aqua"
               HorizontalTextAlignment="Center" />

        <!-- Body -->
        <FlexLayout FlexLayout.Grow="1">

            <!-- Content -->
            <Label Text="CONTENT"
                   FontSize="18"
                   BackgroundColor="Gray"
                   HorizontalTextAlignment="Center"
                   VerticalTextAlignment="Center"
                   FlexLayout.Grow="1" />

            <!-- Navigation items-->
            <BoxView FlexLayout.Basis="50"
                     FlexLayout.Order="-1"
                     Color="Blue" />

            <!-- Aside items -->
            <BoxView FlexLayout.Basis="50"
                     Color="Green" />

        </FlexLayout>

        <!-- Footer -->
        <Label Text="FOOTER"
               FontSize="18"
               BackgroundColor="Pink"
               HorizontalTextAlignment="Center" />
    </FlexLayout>
</ContentPage>

導覽和擱置區域會以 BoxView 左側和右側的 呈現。 第一 FlexLayout 個具有垂直主軸，並包含三個子系在數據行中排列。 這些是頁首、頁面本文和頁尾。 巢狀 FlexLayout 具有水準主軸，其中三個子系排列在一個數據列中：

Holy grail layout with the .NET MAUI FlexLayout.

在此範例中，屬性 Order 會設定 BoxView 為小於其同層級的值，使其顯示為數據列中的第一個專案。 屬性 Basis 會設定在兩個 BoxView 物件上，以提供50個裝置獨立單位的寬度。 屬性 Grow 設定在巢狀 FlexLayout 上，表示這 FlexLayout 應該佔用外部 FlexLayout內所有未使用的垂直空間。 此外， Grow 屬性是在 代表內容的 上 Label 設定，表示此內容會佔用巢狀 FlexLayout內所有未使用的水平空間。

注意

當子系的大小超過 FlexLayout 的大小但不需要換行時，您也可以Shrink使用 屬性。