.NET MAUI弹窗Grid底部按钮不显示问题求助

核心问题分析 #

问题根源在于Grid行定义的空间分配逻辑：未明确行高模式时，中间行可能无限制扩展，加上CollectionView的内容高度特性，会直接挤压底部固定高度的按钮行，导致按钮被挤出可视区域。

正确布局实现 #

通过明确Grid的行高分配规则，无需设置HeightRequest即可实现预期布局：

XAML代码示例 #

<ctk:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
           xmlns:ctk="clr-namespace:CommunityToolkit.Maui.Views;assembly=CommunityToolkit.Maui"
           x:Class="YourNamespace.YourPopup">
    <Grid>
        <!-- 行定义：顶部自适应SearchBar高度，中间占满剩余空间，底部固定35 -->
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="35"/>
        </Grid.RowDefinitions>

        <!-- 顶部固定SearchBar -->
        <SearchBar Grid.Row="0" Placeholder="搜索内容" />

        <!-- 中间滚动区域：ScrollView嵌套CollectionView -->
        <ScrollView Grid.Row="1" VerticalOptions="Fill">
            <CollectionView ItemsSource="{Binding DataItems}">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Label Text="{Binding Content}" Margin="12,8"/>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </ScrollView>

        <!-- 底部固定按钮 -->
        <Button Grid.Row="2" Text="确认操作" VerticalOptions="Fill"/>
    </Grid>
</ctk:Popup>

关键配置说明 #

• Grid行定义是核心：Auto适配顶部控件自然高度，*强制中间行占据所有剩余空间，底部固定35高度的行不会被挤压。
• ScrollView设置VerticalOptions="Fill"，确保它完全填充中间行空间，不会超出边界。
• CollectionView无需额外设置高度，它会在ScrollView内部自适应内容高度，内容过多时ScrollView自动触发滚动。

父级OnSizeAllocated适配建议 #

如果在父页面的OnSizeAllocated中设置Popup尺寸，建议使用相对比例而非硬编码，避免破坏内部布局：

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height);
    if (_yourPopup != null)
    {
        // 基于父容器尺寸设置Popup的相对大小
        _yourPopup.WidthRequest = width * 0.85;
        _yourPopup.HeightRequest = height * 0.75;
    }
}

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