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
可以指出要以完整大小顯示哪些子系的優先順序。
提示
和 Grow
Shrink
值都可以設定為容納匯總子大小有時可能小於或有時大於的大小 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
,以平均配置所有子系之間的所有剩餘垂直空間,高於第一個子系,以及最後一個子系下方:
注意
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
,以配置主軸上所有剩餘空間,讓每個子系被相同的空間量包圍:
此範例的程式代碼後置檔案會擷取相片集合,並將其新增至 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 具有水準主軸,其中三個子系排列在一個數據列中:
在此範例中,屬性 Order
會設定 BoxView 為小於其同層級的值,使其顯示為數據列中的第一個專案。 屬性 Basis
會設定在兩個 BoxView 物件上,以提供50個裝置獨立單位的寬度。 屬性 Grow
設定在巢狀 FlexLayout 上,表示這 FlexLayout 應該佔用外部 FlexLayout內所有未使用的垂直空間。 此外, Grow
屬性是在 代表內容的 上 Label 設定,表示此內容會佔用巢狀 FlexLayout內所有未使用的水平空間。
注意
當子系的大小超過 FlexLayout 的大小但不需要換行時,您也可以Shrink
使用 屬性。