(02).NET MAUI实战 布局
(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 |