Xamarin Form Shell如何仅隐藏TabBar中指定项且保留Flyout显示?
实现方案
这个需求可以实现。你当前写法的问题是将所有ShellContent放在同一个FlyoutItem下,Xamarin Shell默认会将同一FlyoutItem下的所有ShellContent全部渲染为底部Tab,因此会出现所有页面都出现在Tab栏的情况。
不需要自定义渲染的原生实现方案如下:
方案1:拆分Shell结构,分开定义Tab项和Flyout额外项
完全使用Xamarin Shell原生特性实现,兼容性最好:
- 首先在AppShell.xaml中定义底部TabBar,仅包含需要在底部显示的3个页面:
<TabBar> <ShellContent Title="Page 1" ContentTemplate="{DataTemplate local:Page1}" Route="Page1"/> <ShellContent Title="Page 3" ContentTemplate="{DataTemplate local:Page3}" Route="Page3"/> <ShellContent Title="Page 5" ContentTemplate="{DataTemplate local:Page5}" Route="Page5"/> </TabBar>
- 在AppShell的构造函数中注册另外2个不需要在Tab显示的页面的路由:
public AppShell() { InitializeComponent(); Routing.RegisterRoute(nameof(Page2), typeof(Page2)); Routing.RegisterRoute(nameof(Page4), typeof(Page4)); }
- 在AppShell.xaml的
<Shell>节点下添加Flyout菜单项,覆盖你需要的5个选项:
<FlyoutItem Title="Page 1" Icon="page1.png" Route="Page1"/> <MenuItem Text="Page 2" Icon="page2.png" Clicked="NavigateToPage2"/> <FlyoutItem Title="Page 3" Icon="page3.png" Route="Page3"/> <MenuItem Text="Page 4" Icon="page4.png" Clicked="NavigateToPage4"/> <FlyoutItem Title="Page 5" Icon="page5.png" Route="Page5"/>
- 在AppShell.xaml.cs中添加跳转逻辑:
private async void NavigateToPage2(object sender, EventArgs e) { await Shell.Current.GoToAsync(nameof(Page2)); } private async void NavigateToPage4(object sender, EventArgs e) { await Shell.Current.GoToAsync(nameof(Page4)); }
方案2:自定义附加属性控制单个Tab显隐(适合Xamarin Forms 5.0+)
如果你不想调整原有的Shell结构,可以自定义附加属性标记需要隐藏的Tab项,再通过自定义Shell渲染器过滤不需要显示的Tab项,适合有自定义渲染基础的场景使用。
内容的提问来源于stack exchange,提问作者Menintherigging
相关产品推荐
相关产品推荐

