代码之家 › 专栏 › 技术社区 › Enki

MAUI码头布局

maui mobile xaml c#

Enki · 技术社区 · 11 月前

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

我到处玩 Grid 但这会导致“固定”值,对于不同的屏幕尺寸似乎不可靠。

我发现 DockLayout 从MAUI工具包中,我的代码看起来像这样:

    <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>

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

1 回复 | 直到 11 月前

Stephen Quan 11 月前

你观察到的是正确的行为 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>

推荐文章