先看一段代码的效果:
<?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
属性可以实现自动换行,不过拖拽改变窗口大小的时候这个元素还是会乱掉。