MAUI：主要和次要导航栏

Question

因此，考虑应用程序或网站等内的导航栏，通常可以分为主要导航和辅助导航，例如： 正如您在此示例图像中所看到的，以红色虚线突出显示的是整个网站的主要导航，以实心绿色突出显示的是该特定页面/区域的本地导航。

现在，如果我使用 AppShell 创建一个标准 TabBar，如下所示：

    <TabBar>
        <Tab Title="Home">
            <ShellContent ContentTemplate="{DataTemplate Views:HomePage}" />
        </Tab>

        <Tab Title="Books">
            <ShellContent ContentTemplate="{DataTemplate Views:BookPage}" />
        </Tab>

        <Tab Title="Account">
            <ShellContent ContentTemplate="{DataTemplate Views:AccountPage}" />
        </Tab>
    </TabBar>

在“书籍”选项卡中，我有一个可单击的书籍集合视图，单击一本书后，会将页面推送到堆栈上以查看所选书籍，例如该页面可以称为“SelectedBookPage”。

现在堆栈如下所示：Book Page -> SelectedBookPage。

但是，在该 SelectedBookPage 中，我希望有一个本地导航栏，其中包含供用户单击以下选项卡的选项：“信息”、“页面”、“评论”。

如何创建本地导航栏？我知道我可以为每个“选项卡”设置 3 个按钮，但肯定有更好的方法吗？一种更用户友好且具有良好直观 UI 的产品。

到目前为止，对于我的一个 MAUI 应用程序上的这个场景，我只是通过在页面上显示代表不同视图的单选按钮的水平列表来创建自己的场景。然后单击其中一个视图，“ContentPresenter”控件将被赋予一个要呈现的视图。这本质上创建了我自己定制的本地导航栏，但如果这是实现此设计的唯一方法，那就有点令人失望了。

我已经能够在 Flutter 这样的框架中轻松实现本地导航的想法，为什么有时 MAUI 看起来像是半成品呢？尽管它的语言是我最熟悉的语言，但似乎没有什么是容易的......

我愿意听取解决方案、想法、替代方案、想法等。

Answer 1

您可以使用 菜单栏，它是一个容器，在

Mac Catalyst

和

Windows

上的应用程序顶部以水平行显示一组菜单。

以下是示例代码供您参考：

 <Shell.MenuBarItems>

     <MenuBarItem Text="File">

         <MenuFlyoutItem Text="Exit" Clicked="MenuFlyoutItem_Clicked"/>

     </MenuBarItem>

     <MenuBarItem Text="Locations">

         <MenuFlyoutSubItem Text="Change Location">

             <MenuFlyoutItem Text="Redmond, USA"/>

             <MenuFlyoutItem Text="London, UK" />

             <MenuFlyoutItem Text="Berlin, DE" />

         </MenuFlyoutSubItem>

         <MenuFlyoutSeparator />

         <MenuFlyoutItem Text="Add Location"/>

         <MenuFlyoutItem Text="Edit Location"/>

         <MenuFlyoutItem Text="Remove Location" />

     </MenuBarItem>

     <MenuBarItem Text="View">

         <MenuFlyoutItem Text="Refresh"/>

     </MenuBarItem>

 </Shell.MenuBarItems>

<TabBar>
     <Tab Title="Home">
            <ShellContent ContentTemplate="{DataTemplate Views:HomePage}" />
      </Tab>

      <Tab Title="Books">
            <ShellContent ContentTemplate="{DataTemplate Views:BookPage}" />
      </Tab>

      Tab Title="Account">
          <ShellContent ContentTemplate="{DataTemplate Views:AccountPage}" />
      </Tab>
</TabBar>

输出：