MAUI 中无原生顶部 TabView,官方推荐使用 Community Toolkit 的 TabView 实现;也可手写 HorizontalStackLayout + ContentView 切换,或避免误用 Shell TabBar。
MAUI 中没有原生的
TabView
控件——这是常见误解。官方推荐且主流使用的顶部标签页导航方案,是通过
.NET MAUI Shell 的 Tab + TabBar 组合
实现,但默认只支持底部选项卡;若需顶部标签页(类似 Android 的 Material Tabs 或 iOS 的 segmented control 风格),需手动组合或借助第三方库。
顶部标签页不是 Shell 默认行为
Shell 的
固定在底部,
内部多个
会自动在顶部生成可滑动的「子选项卡」(iOS/Android 均支持),但这仅限于同一主 Tab 下的页面切换,不是全局顶部导航栏。
例如:
主 Tab “天气” → 其下两个
:今日、预报 → 顶部会出现两个小标签
这个顶部标签是自动渲染的,不可自定义位置(不能移到整个 App 顶部)
不支持跨 Tab 的顶部统一导航(比如把“首页”“消息”“设置”全放在顶部)
想实现真正的顶部标签页导航,有三种实用方式
1. 使用 Community Toolkit 的 TabView(推荐)
安装
NuGet 包(v7+)
XAML 中直接使用:
,每个
可设 Header(文字/图标/自定义控件)和 Content
支持滑动切换、指示器颜色、预加载策略、禁用某项等
完全跨平台,适配 iOS/Android/
mac
OS,顶部位置由你布局控制(放 StackLayout 顶部即可)
2. 手写顶部 TabBar + ContentView 切换
通义灵码 Mac版
通义灵码 Mac版是阿里云推出的一款AI智能编码助手,深度集成于Xcode、VS Code及JetBrains等主流IDE中。它基于大模型技术,支持行级/函数级实时续写、自然语言生成代码、单元测试生成及智能问答等核心功能。macOS用户可通过插件市场直接安装,开箱即用,旨在辅助开发者高效完成编码任务,提升研发效率。
下载
用
+ 多个
模拟标签头
绑定
和
控制选中态
配合
或
切换主体内容(用
或
属性动态替换)
适合轻量、定制化强的场景,但无动画、无滑动惯性、需手动管理状态
3. 避免强行“顶部 Shell Tab”,因为不支持
不要尝试把
放到 Shell 的顶部区域——Shell 不提供该布局能力
不要混用
和 Shell——两者互斥,会抛异常
不要依赖已废弃的
做顶部导航——它默认也是底部,且不支持 Shell 导航体系
顶部 TabView 基础用法示例(Community Toolkit)
在 XAML 中:
关键点:
支持字符串、Image、甚至 Grid 布局
通过
事件监听切换
用
和
自定义下划线
默认启用滑动,也可设
关闭
基本上就这些。顶部标签页在 MAUI 里不是开箱即用的功能,但用 Community Toolkit 的 TabView 是最省心、最接近原生体验的选择。
TabBarTabShellContentShellContentMicrosoft.Maui.Controls.CommunityToolkitTabViewItemHorizontalStackLayoutButtonIsEnabledBackgroundColorContentViewContentPageIsVisibleContentTabBarNavigationPageTabbedPage
HeaderSelectedTabChangedTabIndicatorColorTabIndicatorHeightIsSwipeEnabled="False"