先看一段代码的效果：
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:tk="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
x:Class="MauiLayout.MainPage">
<tk:DockLayout>
<tk:DockLayout BackgroundColor="Blue"
tk:DockLayout.DockPosition="Top">
<Label BackgroundColor="Chocolate"
Text="Left"
tk:DockLayout.DockPosition="Left" />
<Label BackgroundColor="CornflowerBlue"
Text="Right"
tk:DockLayout.DockPosition="Right" />
<Label BackgroundColor="Coral"
Text="Center" />
</tk:DockLayout>
<FlexLayout
Margin="2"
Wrap="Wrap">
<tk:DockLayout BackgroundColor="Beige"
MinimumWidthRequest="400"
Padding="5"
FlexLayout.Grow=".6" Margin="2">
<Label BackgroundColor="Aqua" Text="Top" tk:DockLayout.DockPosition="Top" />
<Label BackgroundColor="BurlyWood"
Text="top2" />
<Editor BackgroundColor="Brown"
Margin="5" />
</tk:DockLayout>
<tk:DockLayout BackgroundColor="Bisque"
Padding="5"
FlexLayout.Grow=".4" Margin="2">
<Label BackgroundColor="CadetBlue"
Text="top" tk:DockLayout.DockPosition="Top" />
<Editor BackgroundColor="Chartreuse"
Margin="5" />
</tk:DockLayout>
</FlexLayout>
</tk:DockLayout>
</ContentPage>
这段代码其实可以满足大多数常用布局需求了
这里特别说一下 FlexLayout，这个布局显然在目前的 .NET 中是有问题的，有 Grow 属性的元素有时会在边缘被截断，而且有的元素的分布是有问题的
所以我个人还是更倾向于原来 WPF 里的 DockLayout。这个布局不受 .NET MAUI 原生支持，但是有一个社区支持的 CommunityToolkit.Maui，这里面有 DockLayout，还是很好用的。用法和 WPF 稍微有点区别，但是大差不差。
尤其要注意的是，要把有 DockPosition 属性的元素放在前面，否则这个元素不会显示。比如上面代码第13行的 Right 标签如果放在 Center 的后面，窗口里就不会显示。
顺便说一下，FlexLayout 使用 Wrap="Wrap" 配合 MinimumWidthRequest 属性可以实现自动换行，不过拖拽改变窗口大小的时候这个元素还是会乱掉。