.NET MAUI 中的 Shell 导航到带有底部选项卡的页面

Question

在登录流程中，登录页面通常没有构成应用程序主要流程的底部选项卡。

AppShell.xaml

 <TabBar>
        <ShellContent Title="Home"
             Icon="home.png" 
                      ContentTemplate="{DataTemplate local:HomePage}"/>
        <ShellContent Title="Articles"
                          Icon="articles.png"
                          ContentTemplate="{DataTemplate local:ArticlesPage}" />
    </TabBar>

因此，如果登录成功，我尝试从登录页面导航到作为 Shell 中 TabBar 的一部分的主页。问题是 Shell 然后导航到主页，就好像它是一个独立的页面，没有 TabBar。我假设答案在于导航到 TabBar 部分本身，我不知道。

Answer 1

有两种方法可以实现您的要求。

将 LoginPage 包含到 AppShell 中

1. 设置AppShell为.MainPage​App

2. 在AppShell中放置两个Tabbar，LoginPage先放置后放置，并为两者HomePage设置不同。RouteTabbar

   <TabBar Route="Login">
     <ShellContent  ContentTemplate="{DataTemplate local:LoginPage}" />
   </TabBar>
   
   <TabBar Route="Home">
        <ShellContent Title="Home" Icon="home.png" ContentTemplate="{DataTemplate local:HomePage}"/>
        <ShellContent Title="Articles" Icon="articles.png"  ContentTemplate="{DataTemplate local:ArticlesPage}" />
   </TabBar>
   

3. await Shell.Current.GoToAsync("//Home");登录时调用，await Shell.Current.GoToAsync("//Login");退出时调用。

不要将 LoginPage 包含到 AppShell 中

1. LoginPage按照最初的MainPage设置。App
2. MainPage = new AppShell();登录时调用，MainPage = new LoginPage();注销时调用。