【MAUI】FlexLayout

文章目录

概述
属性
- 方向和对齐方式
- - Direction
  - Wrap
  - JustifyContent
  - AlignItems
  - AlignContent
圣杯布局
来源

概述

FlexLayout弹性布局，和前端的Flex弹性布局，几乎一样。FlexLayout是容器，可以定义Direction/主轴方向、Wrap/子元素在主轴方向上是否换行/列、JustityContent/AlignItems/AlignContent子元素整体对齐方式。同时，在子元素上可以通过附加属性，定义子元素的个体行为，如Order，定义子元素排列顺序；Basis/Grow/Shrink，定义子元素主轴方向的尺寸形为；AlighSeft，定义子元素在交叉轴方向的对齐行为。
在这里插入图片描述
使用FlexLayout布局时的经验

确定子元素排列的主轴方向Direction，Row-由左至右水平排列（默认值），Column-由上至下垂直排列，或者RowReverse-由右至左水平排列、ColumnReverse-由下至上垂直排列
确定子元素在主轴方向上是否换行Wrap，NoWrap-不换行（默认值）、Wrap-换行、Reverse-反方向换行
确定子元素整体在主轴和交叉轴上的对齐方式，JustifyContent-主轴方向上的对齐方式、AlignItems-NoWap时交叉轴方向上的对齐方式、AlignContent-Wap时交叉轴方向上的对齐方式
确定子元素个体在主轴和交叉轴上的排列顺序、缩放和对齐行为，Order-排列顺序、Basis/Grow/Shrink-NoWap时主轴方向上的尺寸和缩放、AlignSeft-NoWap时交叉轴方向上的对齐

在这里插入图片描述

属性

AlignContent，类型为 FlexAlignContent，确定布局引擎如何在多行上布局的子元素之间和周围分配空间。此属性的默认值为 Stretch。
AlignItems，类型为 FlexAlignItems，指示布局引擎如何沿交叉轴在子级之间和周围分配空间。此属性的默认值为Stretch。
Direction，类型为 FlexDirection，定义子级的方向和主轴。此属性的默认值为 Row。
JustifyContent，类型为 FlexJustify，指定如何沿主轴在子级之间和周围分布空间。此属性的默认值为 Start。
Position，类型为 FlexPosition，确定子级的位置是相对的，还是使用固定值。此属性的默认值为 Relative。
Wrap，类型为 FlexWrap，用于控制子级是在单行还是多行中布局。此属性的默认值为 NoWrap。
AlignSelf，类型为 FlexAlignSelf，是附加属性，指示布局引擎如何沿交叉轴在特定子级之间和周围分配空间。此属性的默认值为 Auto。
Basis，类型为 FlexBasis，是附加属性，用于定义在根据其他属性值分配可用空间之前子级的初始主大小。此属性的默认值为Auto。
Grow，类型为 float，是附加属性，用于指定子级应在主轴上使用的可用空间量。此属性的默认值为 0.0。验证回调可确保设置属性时，其值大于或等于 0。
Order，类型为 int，是附加属性，用于确定子级是在容器中的其他子级之前还是之后布局。此属性的默认值为 0。
Shrink，类型为 float，是附加属性，用于控制子级应如何收缩才能使所有子级都可以放入容器内。此属性的默认值为1.0。验证回调可确保设置属性时，其值大于或等于 0。

所有这些属性都由 BindableProperty 对象提供支持，这意味着这些属性可以作为数据绑定的目标并设置样式。

当 FlexLayout 中的项以列排列时，FlexLayout 具有垂直主轴和水平交叉轴。当 FlexLayout 的项以行排列时，FlexLayout 具有水平主轴和垂直交叉轴。

方向和对齐方式

可以在 FlexLayout 上设置 Direction、Wrap、JustifyContent、AlignItems、AlignContent 和 Position 可绑定属性，以控制所有子级的方向和对齐方式。

Direction

Direction 属性，类型为 FlexDirection，定义子级的方向和主轴。 FlexDirection 枚举定义下列成员：

Column，指示子元素应垂直堆叠。
ColumnReverse （或 XAML 中的“列反向”），指示子元素应按反向顺序垂直堆叠。
Row，指示子元素应水平堆叠。这是 Direction 属性的默认值。
RowReverse （或 XAML 中的“row-reverse”），指示子元素应按反向顺序水平堆叠。

当 Direction 属性设置为 Column 或 ColumnReverse 时，主轴将为 y 轴，且项将垂直堆叠。当 Direction 属性设置为 Row 或 RowReverse 时，主轴将为 x 轴，且子元素将水平堆叠。

在 XAML 中，可以使用小写、大写或混合大小写的枚举成员名称来指定此属性的值，也可以使用括号中显示的两个附加字符串。

Wrap

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 来实现。

下面的示例使用嵌套在另一个中的 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 中所有未使用的水平空间。