.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>

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

Answer 1

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

---

将 LoginPage 包含到 AppShell 中

1. 在App中将AppShell设置为MainPage。

2. 在 AppShell 中放置两个Tabbar，先放置LoginPage，然后放置HomePage，并为两个Tabbar设置不同的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. 首先将LoginPage设置为App中的MainPage。
   2. 登录时调用MainPage = new AppShell();，退出时调用MainPage = new LoginPage();。

Answer 2

除了 ColeX 的回答之外，它仍然可以在没有 TabBar 控件的情况下完美运行。

 <ShellContent ContentTemplate="{DataTemplate pages:LoginPage}"
               Route="LoginPage"/>

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

---

LoginPage.xaml.cs 中的登录按钮事件处理程序

private async void BtnLogin_Clicked(object sender, EventArgs e)
{
    // ApiHelper is a static class with methods that communicate with an API.
    var response = await ApiHelper.Login(EntEmail.Text, EntPassword.Text);

    if (response)
    {
        await Shell.Current.GoToAsync("//HomePage");
    }
    else
    {
        await DisplayAlert("", "Operation failed", "Cancel");
    }
}

笔记：EntEmail 和EntPassword 是LoginPage.xaml 中两个Entry 控件的名称。