MAUI中TabbedPage子页面Grid布局溢出问题求解决方案

已确认该问题对应MAUI官方Bug #20028，当页面作为TabbedPage子页面时，使用RowDefinitions="Auto,*,Auto"的Grid会溢出窗口高度，导致底部按钮不可见。以下是几个可行的临时修复方案：

方案1：动态设置页面内容的底部内边距 #

通过代码后台获取父TabbedPage的底部导航栏高度，为页面内容添加对应底部内边距，确保Grid不会被导航栏遮挡：

protected override void OnAppearing()
{
    base.OnAppearing();
    AdjustContentMargin();
}

protected override void OnSizeChanged(double width, double height)
{
    base.OnSizeChanged(width, height);
    AdjustContentMargin();
}

private void AdjustContentMargin()
{
    if (Parent is TabbedPage tabbedPage)
    {
        // 给Content添加底部内边距，值等于TabbedPage的导航栏高度
        this.Content.Margin = new Thickness(0, 0, 0, tabbedPage.BarHeight);
    }
}

方案2：XAML绑定方式设置底部内边距 #

直接在XAML中通过绑定获取父TabbedPage的BarHeight，设置页面的Margin：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourNamespace.YourPage">
    <ContentPage.Margin>
        <OnPlatform x:TypeArguments="Thickness">
            <!-- 根据平台设置底部内边距为TabbedPage导航栏高度 -->
            <On Platform="Windows,Android,iOS" 
                Value="0,0,0,{Binding Source={RelativeSource AncestorType={x:Type TabbedPage}}, Path=BarHeight}" />
        </OnPlatform>
    </ContentPage.Margin>

    <Grid RowDefinitions="Auto,*,Auto">
        <SearchBar />
        <ListView Grid.Row="1">
            <ListView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>ListView Item</x:String>
                    <x:String>ListView Item</x:String>
                </x:Array>
            </ListView.ItemsSource>
        </ListView>
        <HorizontalStackLayout Grid.Row="2">
            <Button Text="Display Content Page" Clicked="ContentPageButton_Clicked" />
            <Button Text="Display Tabbed Page" Clicked="TabbedPageButton_Clicked" />
        </HorizontalStackLayout>
    </Grid>
</ContentPage>

方案3：使用ScrollView包裹Grid（应急方案） #

如果上述方案不生效，可临时用ScrollView包裹整个Grid，确保底部按钮可通过滚动显示：

<ScrollView VerticalOptions="FillAndExpand">
    <Grid RowDefinitions="Auto,*,Auto">
        <!-- 原Grid内容 -->
    </Grid>
</ScrollView>

注意：此方案会让整个页面可滚动，ListView的滚动会和外层ScrollView嵌套，仅作为临时应急使用。

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