.NET MAUI 社区工具包 - 无法将子视图置于弹出窗口中

Question

如果我创建一个 MAUI 弹出窗口，并在垂直堆栈布局中添加一些标签、条目和按钮，它们会出现在弹出窗口的顶部，在底部留下不美观的间隙。 问题： 读取 Android 设备上的问题：

Pixel 5 模拟器上的问题：

相同的代码在 ContentPage 中运行良好：

VS 17.9.6（尝试17.11.0并得到相同的结果） .NET8 CommunityToolkit.MAUI 7.0.1（尝试过 9.0.0 并得到相同的结果）

最初，我想在所有子视图上设置 VerticalOptions="CenterAndExpand" 或 VerticalOptions="FillAndExpand"，希望它们垂直均匀地间隔开。这不起作用，而且似乎不应该起作用： “因此，如果在子视图的 VerticalOptions 属性上设置了 Start、Center、End 或 Fill 字段，垂直方向的 StackLayout 会忽略它们” 来源：https://learn.microsoft.com/en-us/dotnet/maui/user-interface/align-position?view=net-maui-8.0

我很难尝试将 Popup 高度设置为与子视图高度之和相同。我不能这样做，因为 Popup 构造函数要求我说出 Popup 应该有多大（我认为这很烦人，因为在某些应用程序中，我可能想以编程方式显示隐藏字段，所以我不知道它有多大必须是）

最终我尝试将 VerticalOptions="Center" 添加到主 StackLayout 中。该解决方案适用于内容页面（如果我将代码粘贴到内容页面中），但它不适用于弹出窗口。我尝试将 VerticalOptions="Center" 设置为弹出窗口本身，但没有成功。

以下任何解决方案都可以解决该问题，但无法实施其中任何一个：

• 将子视图垂直居中
• 均匀分布垂直子视图
• 使弹出窗口的高度与子视图的总和一样大 XAML：

<?xml version="1.0" encoding="utf-8" ?>
<mct:Popup x:Class="SLtest.SaveDialog"
            xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
            CanBeDismissedByTappingOutsideOfPopup="False"
            VerticalOptions="Center">

    <VerticalStackLayout VerticalOptions="Center" BackgroundColor="Blue">
        <VerticalStackLayout x:Name="NotesSL" BackgroundColor="LightBlue">
            <Label x:Name="NotesLbl" Text="Notes"/>
            <Entry x:Name="NotesEntry"/>
        </VerticalStackLayout>
        <VerticalStackLayout x:Name="USFsl" BackgroundColor="LightCoral">
            <Label x:Name="USFlbl" Text="USF"/>
            <Entry x:Name="USFentry"/>
        </VerticalStackLayout>
        <Grid BackgroundColor="LightGreen">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width = "1*"/>
                <ColumnDefinition Width = "1*"/>
            </Grid.ColumnDefinitions>
            <Button Text="Cancel"
                    Margin="10,0"/>
            <Button Text="Save"
                    Clicked="Button_Clicked"
                    Margin="10,0"
                    Grid.Column="1"/>
        </Grid>
    </VerticalStackLayout>

</mct:Popup>

C#：

    using CommunityToolkit.Maui.Views;
    using SLtest.classes;
    
    namespace SLtest;
    
    public partial class SaveDialog : Popup
    {
        public SaveDialog(PopupSizeConstants popupSizeConstants)
        {
            InitializeComponent();
    
            Size = popupSizeConstants.Medium;
            ResultWhenUserTapsOutsideOfPopup = "User Tapped Outside of Popup";
        }
    
        async void Button_Clicked(object? sender, EventArgs e)
        {
            var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));
            await CloseAsync("Close button tapped", cts.Token);
        }
    }

Answer 1

1. 将子视图在弹出窗口中垂直居中： 要使子视图垂直居中，您可以将 VerticalStackLayout 的 VerticalOptions 设置为“FillAndExpand”而不是“Center”。

2. 在弹出窗口中垂直均匀地间隔子视图： 要在垂直方向均匀地间隔子视图，您可以向 VerticalStackLayout 添加 Spacing 属性。

3.使弹出窗口的高度与子视图的总和一样大： 为了使弹出窗口的高度根据内容进行调整，您可能需要将 VerticalStackLayout 的 HeightRequest 属性设置为固定值或将其动态绑定到子视图的高度总和。