.NET MAUI父网格与子网格在iPhone14/15上出现空隙问题

我使用Grid布局将子Grid定位在父Grid顶部，该布局在Android设备及iPhone14之前的苹果设备上显示正常，但在iPhone14和15设备上，父网格与子网格之间会出现空隙。

原布局代码：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:mct="clr-namespace:CommunityToolkit.Maui.Behaviors;assembly=CommunityToolkit.Maui"
             x:Class="IOSMauiAppGroupsOneApp.NewPage1"
             Shell.BackgroundColor="{AppThemeBinding Light=#3856A8, Dark=#232234}"
             Shell.NavBarIsVisible="False"
             Title="NewPage1">
    <ContentPage.Behaviors>
        <mct:StatusBarBehavior StatusBarColor="{AppThemeBinding Light=#3856A8, Dark=#232234}" />
    </ContentPage.Behaviors>
    <Grid BackgroundColor="Red">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid Margin="0"
              Grid.Row="0"
              ColumnSpacing="16"
              Padding="16,12,16,12"
              HorizontalOptions="Fill"
              VerticalOptions="Start"
              BackgroundColor="{AppThemeBinding Light=#3856A8, Dark=#232234}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Button
                 Grid.Column="0"
                 Text="Сохранить"
                 BorderColor="White"
                 BackgroundColor="Transparent"
                 CornerRadius="8"
                 TextColor="White"/>
            <Image
                Grid.Column="3"
                Source="icon_folder.png"
                HorizontalOptions="EndAndExpand"
                VerticalOptions="Center"
                ToolTipProperties.Text="Открыть документ">
            </Image>
            <Image
                Grid.Column="2"
                HorizontalOptions="EndAndExpand">
            </Image>
        </Grid>
    </Grid>
</ContentPage>

期望效果：子网格与父网格顶部边缘完全对齐。

解决方案 #

这个问题源于iPhone14/15系列的动态岛/刘海区域，MAUI默认会为这些设备添加安全区域内边距，即使隐藏导航栏也可能残留偏移。以下是两种解决方式：

方法1：全局禁用页面安全区域适配 #

在ContentPage中添加Padding="0"，同时优化父Grid的行定义（移除未使用的行），确保子Grid顶部完全贴合：

修改后的代码：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:mct="clr-namespace:CommunityToolkit.Maui.Behaviors;assembly=CommunityToolkit.Maui"
             x:Class="IOSMauiAppGroupsOneApp.NewPage1"
             Shell.BackgroundColor="{AppThemeBinding Light=#3856A8, Dark=#232234}"
             Shell.NavBarIsVisible="False"
             Padding="0"
             Title="NewPage1">
    <ContentPage.Behaviors>
        <mct:StatusBarBehavior StatusBarColor="{AppThemeBinding Light=#3856A8, Dark=#232234}" />
    </ContentPage.Behaviors>
    <Grid BackgroundColor="Red" VerticalOptions="Start">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid Margin="0"
              Grid.Row="0"
              ColumnSpacing="16"
              Padding="16,12,16,12"
              HorizontalOptions="Fill"
              VerticalOptions="Start"
              BackgroundColor="{AppThemeBinding Light=#3856A8, Dark=#232234}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Button
                 Grid.Column="0"
                 Text="Сохранить"
                 BorderColor="White"
                 BackgroundColor="Transparent"
                 CornerRadius="8"
                 TextColor="White"/>
            <Image
                Grid.Column="3"
                Source="icon_folder.png"
                HorizontalOptions="EndAndExpand"
                VerticalOptions="Center"
                ToolTipProperties.Text="Открыть документ">
            </Image>
            <Image
                Grid.Column="2"
                HorizontalOptions="EndAndExpand">
            </Image>
        </Grid>
    </Grid>
</ContentPage>

方法2：仅针对iOS平台调整安全区域 #

如果需要保留其他平台的安全区域适配，可在代码后台添加iOS专属逻辑：

在NewPage1.xaml.cs中：

protected override void OnAppearing()
{
    base.OnAppearing();
#if IOS
    Microsoft.Maui.Handlers.WindowHandler.Mapper.AppendToMapping("IgnoreSafeArea", (handler, view) =>
    {
        handler.PlatformView.IgnoreSafeArea = true;
    });
#endif
}

或者在XAML中使用平台特定的Padding设置：

<ContentPage ...
             Padding="{OnPlatform iOS=0, Android=0, Default=0}">

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