.NET MAUI应用iPad 13英寸FlyoutPage无法完全关闭的解决思路

我在.NET MAUI应用中实现了FlyoutPage，该控件在安卓或iOS手机上运行正常。苹果要求应用同时适配13英寸（或12.9英寸）iPad，目前遇到的问题是：竖屏模式下打开FlyoutPage会占满屏幕，滑动关闭时仅能收起25%，仍有75%的FlyoutPage停留在屏幕上；横屏模式下则与桌面端类似，采用分屏方式显示菜单，运行正常。我使用的是MAUIKIT自带的FlyoutPage示例。

FlyoutPage XAML布局 #

<FlyoutPage
    x:Class="SignatureSeries.AppFlyout"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:extensions="clr-namespace:SignatureSeries.Extensions"
    xmlns:local="clr-namespace:SignatureSeries"
    xmlns:views="clr-namespace:SignatureSeries.Views"
    FlyoutLayoutBehavior="{OnIdiom Phone='Popover',
                             Tablet='Popover',
                                   Desktop='Split'}">
</FlyoutPage>

FlyoutPage后台代码 #

public partial class AppFlyout : FlyoutPage
{
    public AppFlyout()
    {
        try
        {
            Flyout = new MainMenuPage(LaunchPageInDetail);
        }
        catch (Exception ex)
        {
            Device.BeginInvokeOnMainThread(async () =>
            {
                await DisplayAlert("Information", ex.Message, "OK");
            });
            throw;
        }
    }
    private void LaunchPageInDetail(Page page)
    {
        Detail = page;
        if (!((IFlyoutPageController)this).ShouldShowSplitMode)
        {
            IsPresented = false;
        }
    }
}

解决方案 #

1. 精细化配置FlyoutLayoutBehavior #

当前为Tablet统一设置Popover的逻辑存在缺陷，iPad竖屏时MAUI的默认判断会导致菜单无法完全收起。可以结合设备平台和屏幕方向，针对性配置布局行为：

FlyoutLayoutBehavior="{OnIdiom 
    Phone='Popover',
    Desktop='Split',
    Tablet={OnPlatform 
        iOS={OnOrientation Portrait='Popover', Landscape='Split'}, 
        Default='Popover'}}"

2. 强制限制iPad竖屏时Flyout宽度 #

通过iOS自定义渲染器，直接控制Flyout的显示宽度，避免占满屏幕：

using Microsoft.Maui.Controls.Platform;
using Microsoft.Maui.Controls.Platform.iOS;
using UIKit;

[assembly: ExportRenderer(typeof(FlyoutPage), typeof(CustomFlyoutPageRenderer))]
namespace SignatureSeries.Platforms.iOS
{
    public class CustomFlyoutPageRenderer : FlyoutPageRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);
            AdjustFlyoutWidth();
        }

        public override void WillRotate(UIInterfaceOrientation toInterfaceOrientation, double duration)
        {
            base.WillRotate(toInterfaceOrientation, duration);
            AdjustFlyoutWidth();
        }

        private void AdjustFlyoutWidth()
        {
            var isPortrait = UIDevice.CurrentDevice.Orientation is UIDeviceOrientation.Portrait or UIDeviceOrientation.PortraitUpsideDown;
            if (isPortrait)
            {
                // 竖屏时设置Flyout宽度为屏幕的30%
                FlyoutWidth = (nfloat)(UIScreen.MainScreen.Bounds.Width * 0.3);
            }
            else
            {
                // 横屏时恢复MAUI默认分屏逻辑
                FlyoutWidth = -1;
            }
        }
    }
}

3. 修正Flyout自动关闭逻辑 #

原代码中ShouldShowSplitMode的判断在iPad竖屏时可能返回错误值，手动结合设备类型和屏幕方向判断是否关闭Flyout：

private void LaunchPageInDetail(Page page)
{
    Detail = page;
    var isIpadPortrait = DeviceInfo.Idiom == DeviceIdiom.Tablet 
                        && DeviceInfo.Platform == DevicePlatform.iOS
                        && DeviceDisplay.Current.MainDisplayInfo.Orientation == DisplayOrientation.Portrait;
    
    // 仅iPad横屏时保留分屏，其他场景点击菜单后关闭Flyout
    if (!isIpadPortrait)
    {
        IsPresented = false;
    }
}

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