MAUI 中没有原生的 TabView 控件——这是常见误解。官方推荐且主流使用的顶部标签页导航方案,是通过 .NET MAUI Shell 的 Tab + TabBar 组合 实现,但默认只支持底部选项卡;若需顶部标签页(类似 Android 的 Material Tabs 或 iOS 的 segmented control 风格),需手动组合或借助第三方库。
顶部标签页不是 Shell 默认行为
Shell 的
TabBar固定在底部,
Tab内部多个
ShellContent会自动在顶部生成可滑动的「子选项卡」(iOS/Android 均支持),但这仅限于同一主 Tab 下的页面切换,不是全局顶部导航栏。
例如:
主 Tab “天气” → 其下两个ShellContent:今日、预报 → 顶部会出现两个小标签 这个顶部标签是自动渲染的,不可自定义位置(不能移到整个 App 顶部) 不支持跨 Tab 的顶部统一导航(比如把“首页”“消息”“设置”全放在顶部)
想实现真正的顶部标签页导航,有三种实用方式
1. 使用 Community Toolkit 的 TabView(推荐)
安装Microsoft.Maui.Controls.CommunityToolkitNuGet 包(v7+) XAML 中直接使用:
<tabview></tabview>,每个
TabViewItem可设 Header(文字/图标/自定义控件)和 Content 支持滑动切换、指示器颜色、预加载策略、禁用某项等 完全跨平台,适配 iOS/Android/macOS,顶部位置由你布局控制(放 StackLayout 顶部即可)
2. 手写顶部 TabBar + ContentView 切换
用HorizontalStackLayout+ 多个
Button模拟标签头 绑定
IsEnabled和
BackgroundColor控制选中态 配合
ContentView或
ContentPage切换主体内容(用
IsVisible或
Content属性动态替换) 适合轻量、定制化强的场景,但无动画、无滑动惯性、需手动管理状态
3. 避免强行“顶部 Shell Tab”,因为不支持
不要尝试把TabBar放到 Shell 的顶部区域——Shell 不提供该布局能力 不要混用
NavigationPage和 Shell——两者互斥,会抛异常 不要依赖已废弃的
TabbedPage做顶部导航——它默认也是底部,且不支持 Shell 导航体系
顶部 TabView 基础用法示例(Community Toolkit)
在 XAML 中:
<toolkit:TabView>
<toolkit:TabView.TabItems>
<toolkit:TabViewItem Header="首页">
<VerticalStackLayout><Label Text="首页内容" /></VerticalStackLayout>
</toolkit:TabViewItem>
<toolkit:TabViewItem Header="搜索">
<VerticalStackLayout><Label Text="搜索内容" /></VerticalStackLayout>
</toolkit:TabViewItem>
</toolkit:TabView.TabItems>
</toolkit:TabView>
关键点:
Header支持字符串、Image、甚至 Grid 布局 通过
SelectedTabChanged事件监听切换 用
TabIndicatorColor和
TabIndicatorHeight自定义下划线 默认启用滑动,也可设
IsSwipeEnabled="False"关闭
基本上就这些。顶部标签页在 MAUI 里不是开箱即用的功能,但用 Community Toolkit 的 TabView 是最省心、最接近原生体验的选择。
