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

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设置为App中的MainPage。

2. 在AppShell中放置两个Tabbar，LoginPage先于HomePage，两个[=14=设置不同的Route ].

   <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. 首先在App中设置LoginPage为MainPage。
2. 登录时调用MainPage = new AppShell();，退出时调用MainPage = new LoginPage();。