如何在MvvmCross中于TabbedPage内添加NavigationPage

当然可行！你遇到的核心问题是没有正确通过ViewModel层级来维护TabbedPage的上下文——直接把NavigationPage的子页面绑定到Tab项时，MvvmCross会默认替换当前导航栈的根，导致父TabbedPage被覆盖。下面是基于ViewModel导航的标准实现方案，以及关键注意点：

核心思路 #

通过构建ViewModel层级映射页面结构，让根TabbedPage始终作为导航栈的最顶层，所有子Tab（包括嵌套TabbedPage、独立ContentPage、NavigationPage）都作为根TabbedPage的子ViewModel存在。NavigationPage需要通过一个"宿主ViewModel"来包装，避免直接替换根Tab。

具体实现步骤 #

1. 定义ViewModel层级 #

完全匹配你需要的页面结构：

RootTabbedViewModel（对应根TabbedPage）
├─ InnerTabbedViewModel（对应内部TabbedPage）
│  ├─ ContentPage1ViewModel
│  ├─ ContentPage2ViewModel
│  └─ InnerNavHostViewModel（对应内部NavigationPage的宿主）
│     └─ FirstInnerNavPageViewModel → SecondInnerNavPageViewModel
├─ SingleContentViewModel（对应独立ContentPage）
└─ OuterNavHostViewModel（对应外部NavigationPage的宿主）
   └─ FirstOuterNavPageViewModel → SecondOuterNavPageViewModel

根TabbedPage的ViewModel

public class RootTabbedViewModel : MvxTabbedViewModel
{
    public RootTabbedViewModel(IMvxNavigationService navigationService) 
        : base(navigationService) { }

    protected override void InitializeTabs()
    {
        // 添加内部嵌套TabbedPage
        AddTab<InnerTabbedViewModel>("内部标签");
        // 添加独立ContentPage
        AddTab<SingleContentViewModel>("单独页面");
        // 添加外部NavigationPage的宿主
        AddTab<OuterNavHostViewModel>("导航栈");
    }
}

内部嵌套TabbedPage的ViewModel

public class InnerTabbedViewModel : MvxTabbedViewModel
{
    public InnerTabbedViewModel(IMvxNavigationService navigationService) 
        : base(navigationService) { }

    protected override void InitializeTabs()
    {
        AddTab<ContentPage1ViewModel>("页面1");
        AddTab<ContentPage2ViewModel>("页面2");
        // 添加内部NavigationPage的宿主
        AddTab<InnerNavHostViewModel>("内部导航");
    }
}

NavigationPage的宿主ViewModel

这个ViewModel的作用是作为NavigationPage的根，负责初始化第一个页面，同时维护NavigationPage的上下文：

public class OuterNavHostViewModel : MvxNavigationViewModel
{
    public OuterNavHostViewModel(IMvxNavigationService navigationService) 
        : base(navigationService) { }

    public override async Task Initialize()
    {
        await base.Initialize();
        // 导航到NavigationPage的第一个页面
        await NavigationService.Navigate<FirstOuterNavPageViewModel>();
    }
}

2. 视图层绑定 #

• 根视图创建RootTabbedPage，继承自MvxTabbedPage<RootTabbedViewModel>
• 内部嵌套Tab视图创建InnerTabbedPage，继承自MvxTabbedPage<InnerTabbedViewModel>
• 每个NavigationHost对应的视图使用MvxNavigationPage，绑定到对应的Host ViewModel（比如OuterNavHostViewModel）

3. 内部导航的正确姿势 #

在NavigationPage的子页面ViewModel中，直接使用IMvxNavigationService进行导航即可，MvvmCross会自动在当前NavigationPage的栈内操作，不会影响根TabbedPage：

public class FirstOuterNavPageViewModel : MvxViewModel
{
    private readonly IMvxNavigationService _navigationService;

    public ICommand NavigateToSecondPageCommand => 
        new MvxAsyncCommand(async () => await _navigationService.Navigate<SecondOuterNavPageViewModel>());

    public FirstOuterNavPageViewModel(IMvxNavigationService navigationService)
    {
        _navigationService = navigationService;
    }
}

关键注意点 #

• 绝对不要直接将NavigationPage的子页面ViewModel添加为Tab项，必须通过Host ViewModel包装
• 所有导航操作都基于ViewModel进行，不要直接操作原生Page对象
• 返回上一页时使用NavigationService.Close(this)，会在当前NavigationPage栈内回退，根TabbedPage始终保留

替代方案（如果嵌套Tab遇到兼容问题） #

如果某些平台对嵌套TabbedPage支持不佳，可以用自定义底部导航栏（基于ContentView实现）替代原生TabbedPage，将所有页面放在一个顶级NavigationPage中，通过ViewModel切换内容区域的页面，同时保持底部导航栏持久显示。不过这种方案需要自己处理导航状态维护，不如原生TabbedPage简洁。

内容的提问来源于stack exchange，提问作者AbsoluteSith