MAUI新生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端)
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!