.NET MAUI Community Toolkit弹窗子视图无法垂直居中求助

你为Popup设置了固定尺寸（Size = popupSizeConstants.Medium），导致弹窗高度固定，但内容总高度小于弹窗高度；而VerticalStackLayout作为根布局时，默认仅包裹内容高度，不会填充整个弹窗空间，因此内容会顶在顶部，底部出现空隙。以下是三种针对性解决方案：

解决方案1：让弹窗高度自适应内容 #

直接移除Popup的固定Size设置，弹窗会自动根据内容总高度调整自身尺寸，彻底消除底部空隙。

修改C#构造函数：

public SaveDialog(PopupSizeConstants popupSizeConstants)
{
    InitializeComponent();
    // 注释或删除固定Size的代码
    // Size = popupSizeConstants.Medium;
    ResultWhenUserTapsOutsideOfPopup = "User Tapped Outside of Popup";
}

若需要限制弹窗最大宽度（避免内容过宽），可在根布局添加MaximumWidthRequest：

<VerticalStackLayout VerticalOptions="Center" BackgroundColor="Blue" MaximumWidthRequest="400">
    <!-- 原有内容 -->
</VerticalStackLayout>

解决方案2：固定弹窗高度，垂直居中内容 #

保留Popup的固定Size，将根布局替换为Grid（Grid会自动填充整个弹窗空间），再将原VerticalStackLayout放入Grid中设置垂直居中：

修改XAML：

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

    <Grid BackgroundColor="Blue">
        <VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Fill" Padding="10">
            <VerticalStackLayout x:Name="NotesSL" BackgroundColor="LightBlue" Margin="0,0,0,10">
                <Label x:Name="NotesLbl" Text="Notes"/>
                <Entry x:Name="NotesEntry"/>
            </VerticalStackLayout>
            <VerticalStackLayout x:Name="USFsl" BackgroundColor="LightCoral" Margin="0,0,0,10">
                <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>
    </Grid>

</mct:Popup>

解决方案3：固定弹窗高度，垂直均匀分布子视图 #

用Grid作为根布局，让原VerticalStackLayout填充整个弹窗空间，给每个子视图设置VerticalOptions="FillAndExpand"，实现垂直空间均匀分配：

修改XAML：

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

    <Grid BackgroundColor="Blue">
        <VerticalStackLayout VerticalOptions="FillAndExpand" HorizontalOptions="Fill" Padding="10" Spacing="10">
            <VerticalStackLayout x:Name="NotesSL" BackgroundColor="LightBlue" VerticalOptions="FillAndExpand">
                <Label x:Name="NotesLbl" Text="Notes"/>
                <Entry x:Name="NotesEntry"/>
            </VerticalStackLayout>
            <VerticalStackLayout x:Name="USFsl" BackgroundColor="LightCoral" VerticalOptions="FillAndExpand">
                <Label x:Name="USFlbl" Text="USF"/>
                <Entry x:Name="USFentry"/>
            </VerticalStackLayout>
            <Grid BackgroundColor="LightGreen" VerticalOptions="FillAndExpand">
                <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>
    </Grid>

</mct:Popup>

内容的提问来源于stack exchange，提问作者Marius Rusu