.NET MAUI 布局

先看一段代码的效果：

<?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 属性可以实现自动换行，不过拖拽改变窗口大小的时候这个元素还是会乱掉。