我是 xamarin 表单和 shell 的新手,我目前正在尝试使用 Shell (Xamarin.Forms Shell) 设计应用程序的层次结构。我想设计我的应用程序,以便用户登录后,他将被带到一个页面(我们称之为主页一),该页面可以从弹出菜单中选择,并且在底部有自己独特的选项卡。我还希望在弹出菜单中可以看到另一个页面(我们称之为主页二),这样如果用户点击主页二,它就会被带到主页二,它在底部有自己的不同选项卡。用户应该会看到不同的选项卡,具体取决于他们在弹出菜单中选择的主页。
整体布局思路如下:
一旦用户启动应用程序,他们将被带到一个起始页面 (StartPage)
起始页让用户可以选择登录 (LoginPage) 或注册 (RegistrationPage)
一旦用户成功登录,他们将被带到主页一(HomePageOne),该主页底部包含 4 个选项卡
如果用户打开弹出菜单,它应该显示 HomePageOne 和 HomePageTwo 的项目,以及注销菜单项。
如果用户点击主页二(HomePageTwo),他们会被带到主页二,它与主页一有不同的标签,反之亦然
如果用户选择注销,他们将被带回起始页 (StartPage)
我目前有两个问题。首先,我不确定如何定义我的 shell 来解释具有不同选项卡的不同主页。其次,当用户选择注销时,它仍然显示弹出菜单(汉堡菜单),即使它应该只在用户成功登录时才可见。
这是我的 AppShell.xaml:
<ShellItem Route="Start" FlyoutItemIsVisible="False">
<ShellContent Route="StartPage" ContentTemplate="{DataTemplate local:StartPage}" />
</ShellItem>
<ShellItem Route="Login" FlyoutItemIsVisible="False" >
<ShellContent Route="LoginPage" ContentTemplate="{DataTemplate local:LoginPage}" />
</ShellItem>
<ShellItem Route="Registration" FlyoutItemIsVisible="False" >
<ShellContent Route="RegistrationPage" ContentTemplate="{DataTemplate local:RegistrationPage}" />
</ShellItem>
<FlyoutItem Title="Home Page One" Icon="icon_about.png">
<ShellContent Route="HomePageOne" ContentTemplate="{DataTemplate local:HomePageOne}" />
</FlyoutItem>
<FlyoutItem Title="Home Page Two" Icon="icon_feed.png">
<ShellContent Route="HomePageTwo" ContentTemplate="{DataTemplate local:HomePageTwo}" />
</FlyoutItem>
<!-- When the Flyout is visible this will be a menu item you can tie a click behavior to -->
<MenuItem Text="Logout" StyleClass="MenuItemLayoutStyle" Clicked="MenuLogout_Clicked">
</MenuItem>
这是我的 AppShell.xaml.cs:
public partial class AppShell : Xamarin.Forms.Shell
{
public AppShell()
{
InitializeComponent();
Routing.RegisterRoute(nameof(StartPage), typeof(StartPage));
Routing.RegisterRoute(nameof(RegistrationPage), typeof(RegistrationPage));
Routing.RegisterRoute(nameof(LoginPage), typeof(LoginPage));
}
private async void MenuLogout_Clicked(object sender, EventArgs e)
{
await Shell.Current.GoToAsync("StartPage");
}
}