MAUI Shell Flyout窗口调整大小后消失问题求助

1. 问题原因 #

• Shell内置自适应逻辑冲突：设置FlyoutBehavior="Locked"后，桌面平台的Shell仍会在窗口大小变更时触发内置自适应逻辑（比如窗口宽度过小时自动切换FlyoutBehavior为Flyout），导致后续切换时状态混乱，Flyout被错误隐藏。
• 自定义切换状态未同步：侧边栏切换（图标/完整视图）依赖的状态变量（如Flyout宽度标记）未在窗口resize后更新，下次切换时使用失效的状态值，导致Flyout完全隐藏。
• 桌面平台布局Bug：MAUI Shell在Windows/macOS平台的Flyout布局存在兼容性问题，窗口调整后视觉树未正确更新Flyout的布局位置或可见性，控件被标记为不可见但无法触发恢复逻辑。

2. 解决方法 #

方法1：监听窗口大小变更，强制重置状态 #

在AppShell.xaml.cs中添加窗口大小监听，每次resize后重新锁定Flyout行为并同步显示状态：

public AppShell()
{
    InitializeComponent();
    Application.Current.Windows.First().SizeChanged += OnWindowSizeChanged;
}

private void OnWindowSizeChanged(object sender, EventArgs e)
{
    // 强制锁定Flyout行为
    FlyoutBehavior = FlyoutBehavior.Locked;
    // 同步当前侧边栏状态（_isMinimized为自定义状态标记）
    FlyoutWidth = _isMinimized ? 60 : 250;
}

方法2：自定义ShellRenderer覆盖内置逻辑 #

针对Windows平台创建自定义ShellRenderer，禁止窗口大小变更时修改Flyout行为：

using Microsoft.Maui.Controls.Platform.Windows;

namespace YourApp.Platforms.Windows;

public class CustomShellRenderer : ShellRenderer
{
    protected override IShellFlyoutContentRenderer CreateShellFlyoutContentRenderer()
    {
        var renderer = base.CreateShellFlyoutContentRenderer();
        renderer.FlyoutBehavior = FlyoutBehavior.Locked;
        return renderer;
    }
}

在MauiProgram.cs中注册该渲染器：

builder.ConfigureMauiHandlers(handlers =>
{
#if WINDOWS
    handlers.AddHandler<Shell, CustomShellRenderer>();
#endif
});

方法3：规范切换逻辑使用官方API #

修改侧边栏切换逻辑，直接使用Shell的FlyoutWidth属性，避免自定义状态不同步：

private bool _isMinimized = false;

private void ToggleSidebar()
{
    _isMinimized = !_isMinimized;
    FlyoutWidth = _isMinimized ? 60 : 250;
    InvalidateLayout(); // 强制刷新布局
}

方法4：设置Flyout最小宽度 #

在AppShell.xaml中给Flyout设置MinWidth，防止窗口过小时被挤压消失：

<Shell.FlyoutWidth>250</Shell.FlyoutWidth>
<Shell.FlyoutMinWidth>60</Shell.FlyoutMinWidth>
<Shell.FlyoutBehavior>Locked</Shell.FlyoutBehavior>

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