MAUI应用Flyout项初始透明，调整窗口后恢复显示问题求助

问题核心原因 #

这个问题本质是UI线程更新时机不匹配导致的Shell Flyout渲染异常：

1. StartupPageViewModel构造函数直接调用async void的CheckAuth方法，此时Shell可能未完成初始化，动态添加的FlyoutItem无法触发UI渲染。
2. 动态修改Shell.Items集合后，未强制触发Shell布局刷新，WinUI平台下该问题尤为明显。
3. async void方法执行时机不可控，进一步加剧了UI渲染的不确定性。

具体修复步骤 #

1. 修正CheckAuth的执行时机与异步模式 #

将CheckAuth从async void改为async Task，移至页面OnAppearing中调用，确保Shell已完成初始化：

StartupPage.xaml.cs

protected override async void OnAppearing()
{
    base.OnAppearing();
    if (BindingContext is StartupPageViewModel vm)
    {
        await vm.CheckAuth();
    }
}

StartupPageViewModel.cs

// 替换原async void版本的CheckAuth
public async Task CheckAuth()
{
    var currentUserEmail = await _secureStorage.GetAsync(Constants.LOGGED_USER);

    if (string.IsNullOrEmpty(currentUserEmail))
    {
        await Shell.Current.GoToAsync($"//{nameof(LoginPage)}", true);
    }
    else
    {
        var loggedUser = await dataService.GetByEmailAsync(Constants.USERS, currentUserEmail);

        // 确保所有Flyout操作在UI线程执行
        await MainThread.InvokeOnMainThreadAsync(() =>
        {
            FlyoutHelper.CreateFlyoutHeader(loggedUser);
            FlyoutHelper.CreateFlyoutMenu(loggedUser?.CurrentRole!);
        });

        await NvigationHelper.NavigatoToDashboardRoleAsync(loggedUser?.CurrentRole!);

        // 强制刷新Shell布局，修复WinUI渲染延迟
        MainThread.BeginInvokeOnMainThread(() =>
        {
            Shell.Current.ForceLayout();
            
            // WinUI平台额外触发Flyout显隐，强制更新视觉状态
            if (DeviceInfo.Platform == DevicePlatform.WinUI)
            {
                Shell.Current.FlyoutIsPresented = true;
                Shell.Current.FlyoutIsPresented = false;
            }
        });
    }
}

2. 优化FlyoutHelper的菜单管理逻辑 #

避免重复添加FlyoutItem，切换角色时先清理旧菜单：

FlyoutHelper.cs

public static void CreateFlyoutMenu(string role)
{
    // 移除所有已存在的角色FlyoutItem
    var existingRoleItems = Shell.Current.Items.OfType<FlyoutItem>().ToList();
    foreach (var item in existingRoleItems)
    {
        Shell.Current.Items.Remove(item);
    }

    switch (role)
    {
        case nameof(Roles.Student):
            CreateStudentItems();
            break;
        case nameof(Roles.Teacher):
            CreateTeacherItems();
            break;
        case nameof(Roles.Coordinator):
            CreateCoordintorItems();
            break;
    }
}

3. 移除构造函数中的异步调用 #

删除StartupPageViewModel构造函数内的CheckAuth()调用，避免在ViewModel初始化阶段执行异步操作：

public StartupPageViewModel(IAppService appService, ISecureStorage secure, IDataService<DemyUser> dataService)
{
    _appService = appService;
    _secureStorage = secure;
    this.dataService = dataService;
    // 移除此处的CheckAuth();
}

额外说明 #

• 调试时Shell项存在但不显示，是因为UI元素已创建但未触发渲染，ForceLayout()会强制Shell重新计算布局并渲染。
• WinUI平台的FlyoutIsPresented开关操作，是利用平台特性强制刷新Flyout视觉状态，解决特定平台的渲染bug。

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