FlexLayout
浏览示例
.NET Multi-platform App 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。 有关详细信息，请参阅排序。Shrink，类型为float，是附加属性，用于控制子级应如何收缩才能使所有子级都可以放入容器内。 此属性的默认值为1.0。 验证回调可确保设置属性时，其值大于或等于 0。 有关详细信息，请参阅收缩。
所有这些属性都由 BindableProperty 对象提供支持，这意味着这些属性可以作为数据绑定的目标并设置样式。
重要
当 FlexLayout 中的项以列排列时，FlexLayout 具有垂直主轴和水平交叉轴。 当 FlexLayout 的项以行排列时，FlexLayout 具有水平主轴和垂直交叉轴。
FlexLayout 及其子级可以使用级联样式表 (CSS) 进行部分样式设置。 有关详细信息，请参阅使用级联样式表 (CSS) 设置应用样式。
方向和对齐方式
可以在 FlexLayout 上设置 Direction、Wrap、JustifyContent、AlignItems、AlignContent 和 Position 可绑定属性，以控制所有子级的方向和对齐方式。
方向
Direction 属性，类型为 FlexDirection，定义子级的方向和主轴。 FlexDirection 枚举定义下列成员：
Column，指示子元素应垂直堆叠。ColumnReverse（或 XAML 中的“列反向”），指示子元素应按反向顺序垂直堆叠。Row，指示子元素应水平堆叠。 这是Direction属性的默认值。RowReverse（或 XAML 中的“row-reverse”），指示子元素应按反向顺序水平堆叠。
当 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 中的“space-between”），指示子级应均匀分布，第一个子级在开头，最后一个子级在末尾。SpaceAround（或 XAML 中的“space-around”），指示子级应均匀分布，第一个和最后一个子级具有半空间。SpaceEvenly，指示子级应均匀分布，所有子级周围都有同等的空间。
AlignItems
AlignItems 属性，类型为 FlexAlignItems，指示布局引擎如何沿交叉轴在子级之间和周围分配空间。 FlexAlignItems 枚举定义下列成员：
Stretch，指示子级应伸展。这是AlignItems属性的默认值。Center，指示子级应围绕中心对齐。Start（或 XAML 中的“flex-start”），指示子级应在开头对齐。End（或 XAML 中的“flex-end”），指示子级应在末尾对齐。
这是指示子级如何在交叉轴上对齐的两个属性中的一个。 在每行中，子级在每个项的开始、居中或末尾拉伸或对齐。
对于任何单个子级，可以使用 AlignSelf 附加的可绑定属性重写 AlignItems 设置。
AlignContent
AlignContent 属性，类型为 FlexAlignContent，确定布局引擎如何在多行布局的子元素之间和周围分配空间。 FlexAlignContent 枚举定义下列成员：
Stretch，指示应拉伸子级。这是AlignContent属性的默认值。Center，指示子级应围绕中心对齐。Start（或 XAML 中的“flex-start”），指示子级应在开头对齐。End（或 XAML 中的“flex-end”），指示子级应在末尾对齐。SpaceBetween（或 XAML 中的“space-between”），指示子级应均匀分布，第一个子级在开头，最后一个子级在末尾。SpaceAround（或 XAML 中的“space-around”），指示子级应均匀分布，第一个和最后一个子级具有半空间。SpaceEvenly，指示子级应均匀分布，所有子级周围都有同等的空间。
当只有一行或一列时，AlignContent 属性不起作用。
子级对齐和大小调整
可以在 FlexLayout 的子集上设置 AlignSelf、Order、Basis、Grow 及 Shrink 附加的可绑定属性，以控制子级的方向、对齐方式和大小调整。
AlignSelf
AlignSelf 属性，类型为 FlexAlignSelf，指示布局引擎如何在交叉轴上的特定子级之间和周围分布空间。 FlexAlignSelf 枚举定义下列成员：
Auto，指示子级应根据其父级的对齐值进行对齐。 这是AlignSelf属性的默认值。Stretch，指示子级应拉伸。Center，指示子级应围绕中心对齐。Start（或 XAML 中的“flex-start”），指示子级应在开头对齐。End（或 XAML 中的“flex-end”），指示子级应在末尾对齐。
对于 FlexLayout 的任何单个子级，此属性会重写在 FlexLayout 上设置的 AlignItems 属性。 Auto 的默认设置是指使用 AlignItems 设置。
在 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。
当 Wrap 属性设置为 NoWrap 且子级行的总宽度小于 FlexLayout 的宽度时，或子级列的高度高大于 FlexLayout 时，使用 Grow 属性。 Grow 属性指示如何在子级之间分配剩余空间。 如果为单个子级指定了正 Grow 值，则该元素级将占用所有剩余空间。 或者，也可以在两个或更多个子级之间分配剩余空间。
收缩
Shrink 属性，类型为 float，控制子级应如何收缩，以便所有子元素可以容纳在容器中。 此属性的默认值为 1.0，且其值必须大于或等于 0。
当 Wrap 属性设置为 NoWrap 且子级行的聚合宽度大于 FlexLayout 的宽度，或者单子级列的聚合高度大于 FlexLayout 的高度时，将使用 Shrink 属性。 通常，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>
在此示例中，未设置 FlexLayout 的 Direction 属性，因此它的默认设置为 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 中所有未使用的水平空间。
注意
还存在一个 Shrink 属性，当子项的大小超过 FlexLayout 的大小，但不需要换行时，可以使用该属性。
反馈
即将发布：在整个 2024 年，我们将逐步淘汰作为内容反馈机制的“GitHub 问题”，并将其取代为新的反馈系统。 有关详细信息，请参阅：https://aka.ms/ContentUserFeedback。
提交和查看相关反馈