5.1-Shell导航视觉层次结构

最新推荐文章于 2025-11-03 21:39:28 发布

转载最新推荐文章于 2025-11-03 21:39:28 发布 · 651 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/functionMC/p/17004274.html

文章标签：

#前端 #ui #c#

Maui教程专栏收录该内容

33 篇文章

订阅专栏

文章介绍了MAUI框架内置的Shell导航系统，包括视觉层次结构、路由导航和搜索框功能。Shell提供了FlyoutItem和TabBar等组件来构建应用菜单，内容以三层结构组织。在AppShell.xaml文件中定义Shell，并通过示例展示了如何配置单FlyoutItem和多FlyoutItem的布局，适应手机和PC端的不同显示。

5.1-Shell导航视觉层次结构

一、Shell介绍

MAUI内置了一套导航框架Shell，主要提供了三类功能：视觉层次结构、路由导航、搜索框。其中视觉层次结构从文字上不是很好理解，可以认为是一套导航菜单系统，具有一定的外观样式和层次结构，且可以进行导航跳转。MAUI定义了三层视觉结构对象，第一层为FlyoutItem或TabBar，第二层为Tab，第三层为ShellContent。如下图所示：

在这里插入图片描述
注：

在手机端和PC端，Shell会显示为不同的外观。
默认情况下，每个FlyoutItem有一个对应的底部Tab栏，设置Shell的属性【Shell.TabBarIsVisible=“False”】，可以关闭TabBar。
Maui的页面类型包括：ContentPage、FlyoutPage、NavigationPage、TabbedPage。Shell只能用于组织ContentPage，FlyoutPage/NavigationPage/TabbedPage与Shell是不兼容的，两者只能选其一。

二、Shell在AppShell.xaml文件中定义

1、项目从MauiProgram.cs启动，实例化App根页面
在这里插入图片描述

2、在App.xaml文件中注册应用级别的资源字典；在App.xaml.cs后台代码中，创建AppShell对象，并赋值给MainPage属性。需要全局实例化的对象，也可以放在App。
在这里插入图片描述
3、在AppShell.xaml文件中，设置视觉层次菜单和导航；在AppShell.xmal.cs后台代码中，可以执行全局的路由守卫逻辑。

三、Shell案例

1、单FlyoutItem案例（手机端）。

<Shell ......
       xmlns:views="clr-namespace:Xaminals.Views">

    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="Domestic"
             Icon="paw.png">
            <ShellContent Title="Cats"
                          Icon="cat.png"
                          ContentTemplate="{DataTemplate views:CatsPage}" />
            <ShellContent Title="Dogs"
                          Icon="dog.png"
                          ContentTemplate="{DataTemplate views:DogsPage}" />
        </Tab>        <!--省略了Tab内容属性，实际为<Tab><ShellContent>...</ShellContent></Tab>-->
        <ShellContent Title="Monkeys"
                      Icon="monkey.png"
                      ContentTemplate="{DataTemplate views:MonkeysPage}" />
        <ShellContent Title="Elephants"
                      Icon="elephant.png"
                      ContentTemplate="{DataTemplate views:ElephantsPage}" />
        <ShellContent Title="Bears"
                      Icon="bear.png"
                      ContentTemplate="{DataTemplate views:BearsPage}" />
    </FlyoutItem>

</Shell>

在这里插入图片描述

2、多FlyoutItem案例（PC端）

<Shell ......
       xmlns:views="clr-namespace:Xaminals.Views">

    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="Domestic"
             Icon="paw.png">
            <ShellContent Title="Cats"
                          Icon="cat.png"
                          ContentTemplate="{DataTemplate views:CatsPage}" />
            <ShellContent Title="Dogs"
                          Icon="dog.png"
                          ContentTemplate="{DataTemplate views:DogsPage}" />
        </Tab>        <!--省略了Tab内容属性，实际为<Tab><ShellContent>...</ShellContent></Tab>-->
        <ShellContent Title="Monkeys"
                      Icon="monkey.png"
                      ContentTemplate="{DataTemplate views:MonkeysPage}" />
        <ShellContent Title="Elephants"
                      Icon="elephant.png"
                      ContentTemplate="{DataTemplate views:ElephantsPage}" />
        <ShellContent Title="Bears"
                      Icon="bear.png"
                      ContentTemplate="{DataTemplate views:BearsPage}" />
    </FlyoutItem>

</Shell>