MAUI FlyoutFooter在iOS中显示异常：内容覆盖安全区域

你的Flyout页脚内容在iOS设备上覆盖底部安全区，核心原因是布局未适配iOS的底部安全区规则——即便VerticalStackLayout的IgnoreSafeArea设为False，也需要额外处理底部内边距来避开安全区。

方案1：XAML静态适配平台差异 #

直接通过OnPlatform为iOS设置底部内边距，避开安全区：

<DataTemplate>
    <Grid>
        <VerticalStackLayout 
            Padding="{OnPlatform iOS='0,0,0,34', Default='0'}" 
            IgnoreSafeArea="False">
            <Label Text="Footer" TextColor="Red"></Label>
            <Label Text="Footer2" TextColor="Red"></Label>
            <Label Text="Text" TextColor="Red"></Label>
        </VerticalStackLayout>
    </Grid>
</DataTemplate>
</Shell.FlyoutFooterTemplate>

34是iOS刘海屏设备底部安全区的典型高度，非刘海屏设备会自动适配，静态设置在大部分场景下足够使用。

方案2：代码后台动态适配安全区 #

如果需要适配不同尺寸的iOS设备，可通过代码获取实际安全区高度并动态设置：

1. 给VerticalStackLayout添加命名：

<VerticalStackLayout x:Name="FooterLayout" IgnoreSafeArea="False">

2. 在AppShell的代码后台添加逻辑：

using Microsoft.Maui.Devices;

protected override void OnAppearing()
{
    base.OnAppearing();
    // 获取当前设备底部安全区高度
    var bottomInset = DeviceDisplay.MainDisplayInfo.ScreenInsets.Bottom;
    // 设置底部内边距
    FooterLayout.Margin = new Thickness(0, 0, 0, bottomInset);
}

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