(02).NET MAUI实战 布局

1.概要

既然要做实战开发会建项目之后就需要认识布局控件了，本篇文章分享.NET MAUI中的一些基础常用的布局控件。

• Grid

• StackLayout

• FalyxLayout

• AbsoluteLayout

2.详细内容

• (1)Grid

语法：

<Grid RowDefinitions="50,50,50,50" RowSpacing="10" ColumnDefinitions="10,10" ColumnSpacing="10" Margin="{OnPlatform WinUI=5}"></Grid>

解读：

在MAUI中Grid的语法相比WPF来说，有不少的优化我们来逐个看看有哪些更新。（本文只演示了部分用法不代表全部）

属性名	作用
RowDefinitions	定义有几行（每用一个逗号分隔就代表有几行，以上代码为例有4个50那么就定义了4行高度为50的行）
RowSpacing	定义行间距（每行的间隔为10px）
ColumnDefinitions	定义有几列（每用一个逗号分隔就代表有几列，以上代码为例有2个10那么就定义了2列宽度为10的列）
ColumnSpacing	列间距（每行的间隔为10px）
Margin	定义内边距（这里的边距定义还需要指定对应的生效的平台，同时可以指定多个平台的上表现，以上代码的定义是在WinUI的平台上的每行的间隔为5px，还能指定其它平台的内容。如果不关心平台那么可以直接设定default默认全平台都按照这个样式来展现）

同时MAUI中的Grid也保留了以前WPF中Grid的定义，大家能看到蓝色的波浪线说明两种写法只能用其中一种。

代码应用：

• (2)StackLayout

语法：

<StackLayout Orientation="Horizontal" Spacing="10"  HorizontalOptions="Center" VerticalOptions="Center"/>

解读：

StackLayout和WPF中的StackPanle基础用法没有太大区别，不过还是多了一些MAUI中的特性。（本文只演示了部分用法不代表全部）

属性名	作用
Orientation	指定布局内容横向排列或纵向排列
Spacing	指定布局内容的排列间距
HorizontalOptions	按比例横向空间分布布局内容
VerticalOptions	按比例纵向空间分布布局内容

代码应用：

<StackLayout Orientation="Horizontal" Spacing="10"  HorizontalOptions="Center" VerticalOptions="Center">
    <Button></Button>
 </StackLayout>

• （3）FalyxLayout

语法：

<FlexLayout>
    <Button WidthRequest="100" HeightRequest="20"></Button>
    <Button WidthRequest="100" HeightRequest="20"></Button>
    <Button WidthRequest="100" HeightRequest="20"></Button>
</FlexLayout>

解读：

我个人的理解是，该布局控件会自适应父级控件的宽高来自动调整布局。（这个控件的用法可以参考xamarin的文档。）

当窗体缩小时，布局会“收拢”。

• （4）AbsoluteLayout

语法：

<AbsoluteLayout>
      <Button AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="50,50"/>
</AbsoluteLayout>

解读：

AbsoluteLayout和WPF中的Canvs非常类似。绝对定位的布局方式。（本文只演示了部分用法不代表全部）

属性名	作用
AbsoluteLayout.LayoutFlags	指定布局方式的枚举
AbsoluteLayout.LayoutBounds	指定控件位置的坐标（示例中：x轴50，y轴50），可选值：AutoSize, 比例值（1为最大值可填0.7），位置值50