Flutter：将 Navigator 与 TabBar 和 TabBarView 一起使用答案

【问题标题】：Flutter: Use Navigator with TabBar and TabBarViewFlutter：将 Navigator 与 TabBar 和 TabBarView 一起使用
【发布时间】：2018-01-13 15:32:14
【问题描述】：

我正在尝试理解类 Navigator。

Navigator Route 似乎总是返回一个新的小部件，但如果我想管理 TabBar 和 TabBarView 以便在点击或滑动每个 Tab 时，将被推送到 Navigator 堆栈，我不会找到一个做什么。

在更一般的情况下，我是否可以在不创建新小部件的情况下对路线更改做出反应，而是采取其他操作，例如滚动到 listView 中的特定项目？

我每次都尝试重新创建整个应用程序结构，但这样做我没有很好的默认动画，而且对我来说似乎也不是一个好方法。

【问题讨论】：

欢迎来到 SO！更多细节会很棒 - 将标签栏的视图推送到堆栈的具体用例是什么？通常，您将拥有选项卡栏，然后选项卡中的每个视图都是具有自己堆栈的导航控制器。这是因为通常情况下，选项卡的每个视图都会有一个单独的用户流程（想想 Spotify - 搜索、个人资料等），并且将它们中的每一个都咀嚼到同一个导航堆栈中，这将是一个糟糕的用户体验。
你可以通过TabController观察标签的变化。

标签： flutter

【解决方案1】：

您可以使用 WillPopScope 小部件及其 onWillPop 来捕捉后退按钮压力并自行处理。在这里找到更多信息https://docs.flutter.io/flutter/widgets/WillPopScope-class.html

在更一般的情况下，我可以在不创建路由更改的情况下做出反应吗？一个新的小部件，而是采取另一个动作，比如滚动到 listView 中的特定项目？

这看起来更具体而不是笼统。但是，您确实需要在您的 ListView 中设置一个 ScrollController 并让它为您滚动列表到所需的点。返回顶部的简单示例函数：

class MyFancyClass extends StatelessWidget{
...
ScrollController _scrollController;
...
@override
Widget build(BuildContext Context){
  return ....
  new ListView(
    ...
    controller: _scrollController,
    ...
}

void _toTop() {
  _scrollController.animateTo(
    0.0,
    duration: const Duration(milliseconds: 500),
    curve: Curves.ease,
  );
}

查看https://docs.flutter.io/flutter/widgets/ScrollController-class.html 了解更多详情和行为。如果您希望后退按钮将您带到顶部：

Widget build(BuildContext context) {
  return new WillPopScope(
    onWillPop: _onTop,
    child: 
      ...
    ),
  );
}

关于标签行为，我建议您阅读https://docs.flutter.io/flutter/material/TabController-class.html 以更好地了解如何实现您的想法。

【讨论】：