Xamarin.Forms中如何使用App Shell实现不同页面/角色对应不同Flyout菜单项

整体实现思路 #

核心逻辑为：登录环节验证用户身份并确认角色类型，登录成功后根据角色动态生成AppShell的Flyout侧边栏菜单项，同时跳转至对应用户的首页。该方案维护成本低，扩展新角色时只需修改少量代码即可实现。

分步实现步骤 #

• 1. 定义用户角色枚举与状态存储 #

首先定义角色枚举统一管理用户类型：

public enum UserRole
{
    // 普通客户
    Customer,
    // 管理员
    Admin
}

用户登录状态和角色可以用Xamarin.Essentials提供的Preferences做轻量存储，敏感信息如登录Token建议使用SecureStorage存储。

• 2. 开发登录页逻辑 #

登录页完成账号密码校验、请求后端登录接口后，拿到返回的用户角色，切换应用根页面即可：

// 登录验证通过后的核心逻辑
if (验证登录成功)
{
    var userRole = 接口返回的用户角色;
    Preferences.Set("IsLoggedIn", true);
    Preferences.Set("CurrentUserRole", userRole.ToString());
    // 切换应用主容器为带侧边栏的Shell
    Application.Current.MainPage = new AppShell(userRole);
}

• 3. 动态构建不同角色的Flyout菜单 #

给AppShell的构造函数增加角色入参，根据角色动态生成对应的侧边栏菜单项：

public partial class AppShell : Shell
{
    public AppShell(UserRole role)
    {
        InitializeComponent();
        GenerateFlyoutMenu(role);
        // 默认跳转对应用户的首页
        _ = GoToAsync($"//{role}Home");
    }

    private void GenerateFlyoutMenu(UserRole role)
    {
        // 清空默认配置的菜单项
        Items.Clear();

        if (role == UserRole.Customer)
        {
            // 普通客户侧边栏菜单
            Items.Add(new FlyoutItem 
            { 
                Title = "客户首页", 
                Icon = "customer_home.png", 
                Route = "CustomerHome",
                Items = { new ShellContent { ContentTemplate = new DataTemplate(typeof(CustomerHomePage)) } }
            });
            Items.Add(new FlyoutItem 
            { 
                Title = "我的订单", 
                Icon = "my_order.png", 
                Route = "CustomerOrders",
                Items = { new ShellContent { ContentTemplate = new DataTemplate(typeof(CustomerOrderPage)) } }
            });
            Items.Add(new FlyoutItem 
            { 
                Title = "个人中心", 
                Icon = "user_profile.png", 
                Route = "CustomerProfile",
                Items = { new ShellContent { ContentTemplate = new DataTemplate(typeof(CustomerProfilePage)) } }
            });
        }
        else
        {
            // 管理员侧边栏菜单
            Items.Add(new FlyoutItem 
            { 
                Title = "数据概览", 
                Icon = "dashboard.png", 
                Route = "AdminHome",
                Items = { new ShellContent { ContentTemplate = new DataTemplate(typeof(AdminHomePage)) } }
            });
            Items.Add(new FlyoutItem 
            { 
                Title = "订单管理", 
                Icon = "order_manage.png", 
                Route = "AdminOrders",
                Items = { new ShellContent { ContentTemplate = new DataTemplate(typeof(AdminOrderPage)) } }
            });
            Items.Add(new FlyoutItem 
            { 
                Title = "用户管理", 
                Icon = "user_manage.png", 
                Route = "AdminUsers",
                Items = { new ShellContent { ContentTemplate = new DataTemplate(typeof(AdminUserPage)) } }
            });
        }

        // 通用退出登录项
        Items.Add(new FlyoutItem 
        { 
            Title = "退出登录", 
            Icon = "logout.png", 
            Route = "Logout"
        });
    }

    // 处理退出登录逻辑
    protected override void OnNavigating(ShellNavigatingEventArgs args)
    {
        base.OnNavigating(args);
        if (args.Target.Location.OriginalString == "//Logout")
        {
            // 取消跳转
            args.Cancel();
            // 清空本地存储的登录信息
            Preferences.Clear();
            SecureStorage.RemoveAll();
            // 切回登录页
            Application.Current.MainPage = new LoginPage();
        }
    }
}

• 4. 应用启动逻辑优化 #

在App.xaml.cs中增加登录状态判断，已登录用户直接进入对应角色的主页面，无需重复登录：

public App()
{
    InitializeComponent();

    bool isLoggedIn = Preferences.Get("IsLoggedIn", false);
    if (isLoggedIn)
    {
        var roleStr = Preferences.Get("CurrentUserRole", UserRole.Customer.ToString());
        Enum.TryParse(roleStr, out UserRole currentRole);
        MainPage = new AppShell(currentRole);
    }
    else
    {
        MainPage = new LoginPage();
    }
}

最佳实践建议 #

• 角色判断逻辑统一放在AppShell层级处理，不要分散在各个业务页面，后续新增角色仅需扩展枚举和GenerateFlyoutMenu方法即可
• 菜单项配置可以抽为独立的配置类，支持从服务端拉取动态配置，无需硬编码在逻辑中
• 所有页面路由提前统一注册，避免跳转时出现路由未找到的异常
• 生产环境下建议对本地存储的用户信息做加密处理，避免数据泄露风险

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