如何将 App Shell 与每页不同的 Flyout 项目一起使用

Posted 2023-03-21

【中文标题】如何将 App Shell 与每页不同的 Flyout 项目一起使用

【英文标题】：how to use App Shell with different Flyout items per page

【发布时间】：2021-12-12 22:20:34

【问题描述】：

我是 Xamarin 表单的新手，我需要创建登录页面来记录两种用户类型（客户、管理员）。 之后，它将用户登录到他们的个人资料。 问题是每个配置文件都有不同的弹出项。 所以我不知道如何实现这一目标以及最佳实践是什么。 在这里演示这个想法是一张图片。

【问题讨论】：

看看***.com/a/65187674/5228202 创建其他属性，如 IsAdmin 并通过在同一个 appshell 上绑定到 IsVisible 来处理可见性

【参考方案1】：

在您的登录按钮中，您可以在 XAML 中这样做：

<Button ... Clicked="Login_Clicked" ... />

对于这个用户名，如果是管理员或客户，您可以检查您的数据库并返回一个值以了解它。创建两个页面（AdminPage 和 CustomerPage），并在您的代码隐藏中：

private async void Login_Clicked(object sender, System.EventArgs e)

   if (Database.CheckUser() == "admin")
     Application.Current.MainPage.Navigation.PushAsync(new AdminPage());
    else 
       Application.Current.MainPage.Navigation.PushAsync(new CustomerPage());
   

如果您不想创建两个页面，则可以创建一个页面（UserPage），通过验证用户是什么，然后在您的代码隐藏中设置按钮/标签及其功能，例如：

UserPage.xaml.cs

public UserPage(string checkUser)

 if(checkUser == "admin")
  ProcessAdmin();
 
 else
  ProcessCustomer();
 


ProcessAdmin()
 btn1.Text = "Admin Profiler";
 btn2.Text = "Home Page";
 ...
 ...
 btn1.Clicked => (s,e) 
   //do something for admin profiler button
 ;

【参考方案2】：

FlyoutPage中有两种页面：Flyout和Detail，你可以根据用户的角色来改变它们。 这是一个例子：

**FlyoutPage：**设置flyout依赖于构造函数中设置的标志

public partial class FlyoutMainPage : FlyoutPage
    
        public FlyoutMainPage(bool flag)
        
            InitializeComponent();
            if (flag)
             Flyout = new MenuPage1();
                Detail = new NavigationPage(new TestPage1());
            
            else
           Flyout = new MenuPage2();
            Detail = new NavigationPage(new TestPage1());
        
    

导航：根据动作设置标志值

    async void Button_Clicked(System.Object sender, System.EventArgs e)
    
      await Navigation.PushAsync(new FlyoutMainPage(true));
    

   async void Button_Clicked_1(System.Object sender, System.EventArgs e)
    
        await Navigation.PushAsync(new FlyoutMainPage(false));
    

【讨论】：

OP 正在使用 Shell 的弹出窗口

然后只需更改导航部分它仍然可以工作