Xamarin 使用 Route 形成 Shell 导航答案

【问题标题】：Xamarin Forms Shell Navigation using RouteXamarin 使用 Route 形成 Shell 导航
【发布时间】：2021-10-18 22:06:05
【问题描述】：

如何使用 XAML 中定义的路由进行导航... 我想从 'upcoming' 导航到 'servicedetail' 路线。到目前为止，我已经能够使用以下内容进行导航，但在 servicedetail 页面上看不到后退按钮（屏幕上）。每次我点击后退按钮（物理后退按钮）时，它都会关闭应用程序

await Shell.Current.GoToAsync($"//servicedetail?param={serviceDetail.Id}");

到目前为止，这就是我设置页面的方式...

<FlyoutItem Title="Unison" Route="main"
            FlyoutDisplayOptions="AsSingleItem">
    <Tab Title="My Services" Icon="icon.png">
        <ShellContent Title="Upcoming" Route="upcoming" ContentTemplate="{DataTemplate local:UpcomingServicePage}" />

        <ShellContent Title="Past" ContentTemplate="{DataTemplate local:PastServicePage}" />

    </Tab>


</FlyoutItem>
<TabBar>
    <Tab>
        <ShellContent Route="servicedetail"
              Title="Team" 
              Icon="info.png"
              ContentTemplate="{DataTemplate local:ServiceDetailPage}" />

        <ShellContent Route="servicedetail2"
              Title="Songlist"
              Icon="info.png"
              ContentTemplate="{DataTemplate local:ServiceDetailPage}" />

    </Tab>
</TabBar>

【问题讨论】：

当你说你看不到按钮时你是怎么点击返回按钮的？你实现back-button-behavior了吗？当应用程序关闭时，任何错误？你能分享堆栈跟踪吗？
嘿@JackHua-MSFT，我在屏幕上看不到返回按钮。我所说的后退按钮是Android上的物理后退按钮
你能回答我的另外两个问题吗？官方样本也在这里：Xaminals
应用关闭时没有错误。行为就像没有更多页面可以返回一样，所以关闭
我浏览了 Xaminals 示例。基本上我想做一个在 Xaminals 中完成的类似“monkeysdetail”页面路由。但是在这个详细信息页面上，我想要一个标签栏导航。我需要重新使用 TabbedPage 吗？

标签： xamarin xamarin.forms

【解决方案1】：

我认为你只是在ShellContent 上添加路由，它应该被认为是navigationPage 中的根页面，你不能再弹回来了。

尝试修改您的 xaml 以将 route 添加到 TabBar 和 Tab：

<TabBar Route="tabbarTest">
    <Tab Route="TabTest">
        <ShellContent Route="servicedetail"
          Title="Team" 
          Icon="info.png"
          ContentTemplate="{DataTemplate local:ServiceDetailPage}" />

        <ShellContent Route="servicedetail2"
          Title="Songlist"
          Icon="info.png"
          ContentTemplate="{DataTemplate local:ServiceDetailPage}" />

    </Tab>
</TabBar>

并通过以下方式导航到页面servicedetail1：

await Shell.Current.GoToAsync($"//tabbarTest/TabTest/servicedetail?param={serviceDetail.Id}");

如果你想去servicedetail2:

await Shell.Current.GoToAsync($"//tabbarTest/TabTest/servicedetai2?param={serviceDetail.Id}");

阅读有关navigation#register-routes 的文档以了解其工作原理。

Shell 层次结构中的所有项目都有与之关联的路由。如果路线不是由开发者设置的，路线是在运行。但是，生成的路由不保证是一致的跨不同的应用程序会话。

【讨论】：

试过了，但还是一样...我猜应用程序在尝试从 servicedetail > tabtest > tabbartest 返回时关闭了...这实际上不是一个页面。希望我能够从 servicedetail > main > 即将返回，但那是完全不同的路线
@AmitPhilips 所以您想在弹出菜单中单击即将到来的并转到 servicedetail。那你希望servicedetail上有一个后退按钮可以回到你的detailPage里面有两个Tab吗？
是的，我在 UpcomingServicePage 上有一个列表。如果我点击其中一项，它需要将我重定向到 ServiceDetailPage。在点击返回/返回按钮时，我想重定向回 UpcomingServicePage 上的列表。我将 ServiceDetailPage 作为 shell xaml 页面的一部分的原因是因为功能而不是使用选项卡式页面。使用带有 Shell 的 TabbedPage 会导致页面失真

【解决方案2】：

等待 Shell.Current.GoToAsync($"//servicedetail?param={serviceDetail.Id}");

上述路由将替换堆栈，使用 // 导航到 servicedetail 将擦除堆栈，因此之前的页面历史记录将从堆栈中删除。单击后退按钮后，应用程序将退出，因为堆栈为空。

see shell navigation documentation here

【讨论】：