如何在TabBarView中通过MaterialPageRoute实现Tab导航？

功能实现方案 #

核心需求 #

• 通过TabBarView内部的按钮，完成导航切换到第二个Tab页面的交互
• 排查使用Navigator.of(context).push(MaterialPageRoute(...))方式实现时，跳转至非预期独立页面的问题

问题根源 #

当前实现的核心逻辑错配在于混淆了两类导航机制的适用场景：

• Navigator.push的本质是在应用的全局根路由栈上叠加全新的独立全屏页面，调用后会完全覆盖包含TabBar、TabBarView的主页结构，无法实现Tab组件内部的页签切换效果
• TabBarView的页签切换动作，从设计上就是由绑定的TabController统一管控，全程不需要调用全局路由栈的相关方法

落地实现步骤 #

• 在页面State中持有可跨组件调用的TabController实例，在initState生命周期中完成控制器初始化，配置匹配的Tab总数参数
• 移除TabBarView按钮原有的Navigator.push跳转逻辑，在按钮点击事件中直接调用持有的TabController方法执行页签切换：tabController.animateTo(1)，传入的参数1即对应当前配置中的第二个Tab页，方法会自动带动画完成页签切换，全程不会对全局路由栈产生额外影响

优化提示：为了实现Tab切换而嵌套二级Navigator、隔离根路由栈的方案属于冗余设计，完全违背Tab组件的原生设计逻辑，会额外增加返回手势、页面生命周期管理的维护成本，不推荐采用

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