Xamarin.Forms Shell：有没有办法使用 GoToAsync 和 Routing 导航到选项卡，并在那里推送页面

Posted 2023-03-12

【中文标题】Xamarin.Forms Shell：有没有办法使用 GoToAsync 和 Routing 导航到选项卡，并在那里推送页面

【英文标题】：Xamarin.Forms Shell: Is there a way to use GoToAsync and Routing to navigate to a tab, and push a page there

【发布时间】：2020-03-08 08:20:49

【问题描述】：

考虑以下 Xamarin.Forms Shell XAML：

 <TabBar>
        <Tab Title="Page1" Route="page1" Icon="page1.png">
            <ShellContent ContentTemplate="DataTemplate local:Page1" />
        </Tab>
        <Tab Title="Page2" Route="page2" Icon="page2.png">
            <ShellContent ContentTemplate="DataTemplate local:Page2" />
            <ShellContent Route="page2a" ContentTemplate="DataTemplate local:Page2A" />
        </Tab>
        <Tab Title="Page3" Route="page3" Icon="page3.png">
            <ShellContent ContentTemplate="DataTemplate local:Page3" />
        </Tab>
</TabBar>

这会产生 3 个底部标签。在第 2 页上还有两个顶部选项卡。

我可以通过以下调用成功导航： .GoToAsync("//page1") 和 .GoToAsync("//page2/page2a")

我想做的是将 Page2A 作为一个页面，它被推送到 Page2 选项卡的顶部。因此，当我调用 GoToAsync("//page2/page2a") 时，应用程序导航到 Page2 选项卡，但在顶部显示 Page2A 页面。我不希望顶部选项卡，而是 Page2A NavBar 将具有可见的后退按钮，并且当按下时 Page2A 将从堆栈中弹出并且 Page2 将再次可见。

有什么方法可以通过 Shell 实现这一点，也许是通过调整我的 XAML？

目前我只是使用旧的PushAsync(..) 方法，但不利用Shell 的导航功能似乎很可惜。

【参考方案1】：

当您想在顶部没有页面标签的情况下将页面推送到顶部，您可以使用下面的代码。

 Navigation.PushModalAsync(new NavigationPage(new ShellTabPage1_2()));

如果你想要返回按钮，你可以用ToolbarItem创建。

 <ContentPage.ToolbarItems>
    <ToolbarItem              
        IconImageSource="back_button.png"
        Order="Primary"
        Priority="0"
        Clicked="ToolbarItem_Clicked"/>
</ContentPage.ToolbarItems>
<ContentPage.Content>
    <StackLayout>
        <Label
            HorizontalOptions="CenterAndExpand"
            Text="Welcome to Shell Tab Page 1-2!"
            VerticalOptions="CenterAndExpand" />

    </StackLayout>
</ContentPage.Content>

我可以通过重置 MainPage 导航到 shell 页面。

App.Current.MainPage = new ShellPage();

但是，它无法导航到 shell 标签页。

我们可以在 shell 中导航到上一页。

await  Navigation.PopModalAsync(false);

如果您想在左侧制作后退按钮，您可以使用自定义渲染器来实现。

【讨论】：

我希望实现您所演示的，但使用路由功能 (GoToAsync)。也许我可以隐藏顶部标签栏并实现我自己的后退按钮。