如何使用 .Net Maui Shell 在选项卡式视图中导航并返回

问题描述 投票:0回答:1

在 .Net MAUI 中,我尝试从登录视图导航到主页视图,这是选项卡式布局的一部分。之后,我想导航到一个完全独立的页面,该页面不属于选项卡式布局,因此我不想在顶部或底部看到任何选项卡。

AppShell
中,我添加了路线和选项卡,如下所示:

 public AppShell()
 {
     InitializeComponent();
     Routing.RegisterRoute(nameof(LoginViewModel), typeof(LoginView));
     Routing.RegisterRoute(nameof(HomeViewModel), typeof(HomeView));
     Routing.RegisterRoute(nameof(ExampleViewModel), typeof(ExampleView));

     var initialPage = new ShellContent
     {
         ContentTemplate = new DataTemplate(typeof(LoginView))
     };

     Items.Add(initialPage);

     SetupTabs();
 }

 private void SetupTabs()
 {
     var mainTab = new Tab
     {
         Title = "Main",
         Route = nameof(HomeViewModel)
     };

     mainTab.Items.Add(new ShellContent
     {
         Title = "Page1",
         ContentTemplate = new DataTemplate(typeof(HomeView))
     });

     mainTab.Items.Add(new ShellContent
     {
         Title = "Page2",
         ContentTemplate = new DataTemplate(typeof(PlaceholderView))
     });

     var secondTab = new Tab
     {
         Title = "Second",
     };

    secondTab.Items.Add(new ShellContent
     {
         Title = "Page1",
         ContentTemplate = new DataTemplate(typeof(PlaceholderView))
     });

     Items.Add(mainTab);
     Items.Add(secondTab);
 }

从 LoginViewModel 我这样导航:

await Shell.Current.GoToAsync($"//{HomeViewModel}")

按预期工作,我导航到 HomeView,并且可以看到顶部和底部的选项卡。从这个视图中,我想导航到ExampleView,如下所示:

await Shell.Current.GoToAsync($"{ExampleViewModel}")

但我仍然可以看到底部的选项卡,我相信这是正确的行为,因为每个选项卡都有其堆栈,并且我的新视图已被推送到 HomeView 的顶部。

但这不是我想要实现的目标,我想导航到一个全新的页面,没有任何可见的选项卡,并且如果可能的话能够导航回来。

我尝试过使用不同类型的路线:

await Shell.Current.GoToAsync($"//{ExampleViewModel}")
await Shell.Current.GoToAsync($"///{ExampleViewModel}")

因为我认为我必须重置当前堆栈才能删除选项卡,但这样做我遇到了异常:

Global routes currently cannot be the only page on the stack
我觉得我错过了一些明显的东西,但我找不到有关此类导航的任何信息。使用默认的 Shell 导航是否可以实现这一点?如果可以,是否可以导航回我导航的选项卡式布局中的特定视图?

c# navigation maui maui-shell
1个回答
0
投票

但我仍然可以看到底部的标签,我相信这是 正确的行为,因为每个选项卡都有其堆栈,并且我的新视图已 推到 HomeView 的顶部。

但这不是我想要实现的目标,我想导航到 全新页面,没有任何可见选项卡并且能够导航 如果可能的话回来。

您可以在

ExampleView
Shell.SetTabBarIsVisible(this, false);
方法中将
false
设置为 OnAppearing(),使底栏不可见。

protected override void OnAppearing()
{
      base.OnAppearing();
      Shell.SetTabBarIsVisible(this, false);
}

要修复错误

Global routes currently cannot be the only page on the stack
,您只需删除
//
,如下所示:

await Shell.Current.GoToAsync($"ExampleViewModel");
© www.soinside.com 2019 - 2024. All rights reserved.