MAUI DockLayout

Question

我想构建一个 MAUI 应用程序（主要用于手机）。 我的目标是在右下角有一个按钮。

我尝试过

Grid

但这会导致“固定”值，并且对于不同的屏幕尺寸似乎不可靠。

我从 MAUI 工具包中发现了

DockLayout

，我的代码如下所示：

    <toolkit:DockLayout>
        <Label toolkit:DockLayout.DockPosition="Top"
     Text="Welcome to .NET MAUI!"
     VerticalOptions="Center" 
     HorizontalOptions="Center" />

        <Button Text="+" MaximumWidthRequest="65" MaximumHeightRequest="65" Command="{Binding ShowPopupCommand, Mode=OneWay}" CornerRadius="50" toolkit:DockLayout.DockPosition="Bottom" />
    </toolkit:DockLayout>

标签在顶部是正确的，但按钮在我的应用程序中居中而不是在底部。我做错了什么？

Answer 1

您观察到的是正确的行为，

Label

占据了顶部，并且按钮的区域实际上是整个布局的其余部分。这是因为你没有什么可以占领中心区域的。

如果我们添加一个项目来占据中心区域，按钮将缩小并且仅占据底部的最小区域，即

<toolkit:DockLayout>
    <Label toolkit:DockLayout.DockPosition="Top"
         Text="Welcome to .NET MAUI!"
         VerticalOptions="Center" 
         HorizontalOptions="Center" />

    <Button Text="+" MaximumWidthRequest="65" MaximumHeightRequest="65" Command="{Binding ShowPopupCommand, Mode=OneWay}" CornerRadius="50" toolkit:DockLayout.DockPosition="Bottom" />

    <Label Text="Center" />
</toolkit:DockLayout>