C# MAUI Shell导航方法 C#如何实现Flyout和Tabbed页面

maui shell通过shellcontent定义flyout菜单项并配置tabbar实现底部标签页，支持gotoasync导航、flyoutheader自定义、flyoutbehavior控制及tab页面状态保留。

一、使用ShellContent定义Flyout菜单项

Flyout是MAUI Shell中用于组织主导航结构的侧边栏菜单，需通过ShellContent在AppShell.xaml中声明每个可点击菜单项，并绑定到对应页面。ShellContent作为FlyoutItem的子元素，负责将路由与页面类型关联。

1、在AppShell.xaml的节点内添加标签。

2、为设置FlyoutDisplayOptions="AsMultipleItems"以支持多级显示。

3、在内部嵌套，设置Title属性为菜单显示文本，ContentTemplate内使用绑定目标页面类型。

4、为设置Route属性，例如Route="home"，该值将在代码中用于导航跳转。

二、配置TabBar实现底部标签页切换

TabBar用于在Shell底部提供固定标签页导航，每个Tab对应一组共享状态的页面集合，适合主功能模块划分。TabBar需置于Shell根层级，其子元素为Tab，每个Tab包含多个ShellContent。

1、在AppShell.xaml的节点下直接添加标签。

2、在内添加标签，并设置Title和Icon属性以显示标签标题与图标。

3、在内添加，设置ContentTemplate指向具体页面，如x:DataType="local:DashboardPage"。

4、为每个指定Route，确保可通过GoToAsync("dashboard")触发导航。

三、在C#代码中调用Shell导航方法

Shell提供GoToAsync方法执行路由跳转，支持绝对路径（如"//flyout/home"）和相对路径（如"../settings"），并可携带参数。导航前需确保目标Route已在XAML中注册。

1、在页面代码后台或ViewModel中获取当前Shell实例：var shell = Application.Current.MainPage as Shell;

2、调用shell.GoToAsync("home")跳转至已注册Route为"home"的页面。

TemPolor

AI音乐生成器，一键创作免版税音乐

下载

3、若需传递参数，在Route后附加查询字符串，例如"details?id=123"，并在目标页面重写OnNavigatedTo方法解析。

4、使用await shell.GoToAsync("///tab1/dashboard")执行绝对导航，强制重置Flyout与Tab层级堆栈。

四、启用FlyoutHeader与自定义Flyout行为

FlyoutHeader用于在Flyout顶部展示用户信息或品牌标识，而FlyoutBehavior属性控制Flyout是否可展开。默认为Flyout，设为Disabled可禁用侧边栏，设为Locked则保持常显。

1、在AppShell.xaml的标签内添加节点。

2、在中使用定义Header布局，例如包含Image和Label。

3、为设置FlyoutBehavior="Locked"使Flyout始终可见，避免滑动隐藏。

4、在代码中动态修改FlyoutBehavior：Shell.Current.FlyoutBehavior = FlyoutBehavior.Disabled;

五、处理Tabbed页面中的页面生命周期与状态保留

Tabbed页面在切换Tab时默认会卸载非活动页，导致状态丢失。启用Shell的缓存机制可保留页面实例，避免重复创建与数据重载。

1、为每个添加Shell.PreserveLayout="True"属性，防止布局重建。

2、在目标页面类中重写OnAppearing方法，判断是否首次加载：if (!IsLoaded) { LoadData(); IsLoaded = true; }。

3、在AppShell.xaml中为添加x:Name="mainTab"，便于在代码中访问其当前选中索引：mainTab.CurrentItem = mainTab.Tabs[1];

4、监听Tab切换事件：mainTab.PropertyChanged += (s, e) => { if (e.PropertyName == nameof(TabBar.CurrentItem)) { 执行Tab变更后的同步逻辑 }; };