如何在 PageView 内的 TabBarView 上“合并”滚动？

Question

我有一个在其主页上使用 PageView 的应用程序。今天，我被指派在其中一个页面中插入一个 TabBarView。问题是，当我在最后一个选项卡中的选项卡之间滚动时，向左滚动不会滚动 PageView。

我需要一种方法来使页面视图的滚动在 tabbarview 的开始或结束时滚动。

我发现了一个带有倒置问题的问题：在 TabBarView 中 flutter PageView: scrolling to next tab at the end of page

但是，那里说明的方法不适合我的问题。

我做了一个最小的例子：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'TabBarView inside PageView',
        home: MyHomePage(),
      );
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final PageController _pageController = PageController();

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text('TabBarView inside PageView'),
        ),
        body: PageView(
          controller: _pageController,
          children: <Widget>[
            Container(color: Colors.red),
            GreenShades(),
            Container(color: Colors.yellow),
          ],
        ),
      );
}

class GreenShades extends StatefulWidget {
  @override
  _GreenShadesState createState() => _GreenShadesState();
}

class _GreenShadesState extends State<GreenShades>
    with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    this._tabController = TabController(length: 3, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) => Column(
        children: <Widget>[
          TabBar(
            labelColor: Colors.green,
            indicatorColor: Colors.green,
            controller: _tabController,
            tabs: <Tab>[
              const Tab(text: "Dark"),
              const Tab(text: "Normal"),
              const Tab(text: "Light"),
            ],
          ),
          Expanded(
            child: TabBarView(
              controller: _tabController,
              children: <Widget>[
                Container(color: Colors.green[800]),
                Container(color: Colors.green),
                Container(color: Colors.green[200]),
              ],
            ),
          )
        ],
      );

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }
}

请注意，在此 MRE 中，如果拖动 TabBar 可以到达第 3 页，但如果拖动 TabBarView 则不能。

我怎样才能实现这种行为？

---

编辑：

正如@Fethi 所说，有一个类似的问题： 是否可以从 TabBarView 内容区域滑动到相邻的 PageView 页面？

然而，这个问题没有得到令人满意的回答，因为给出的解决方案并没有真正“混合”滚动，尽管行为与所描述的相似。它不会自然滚动。

Answer 1

这可以通过使用PageController.postion属性的drag方法来实现，该方法在内部拖动ScrollPosition屏幕的 。这样，用户可以直观地拖动页面，就像拖到一半然后完全离开或继续一样。

这个想法的灵感来自另一篇使用 OverScrollNotification 的帖子，但添加了更多的步骤来继续直观的拖动。

1. 当用户开始滚动时收集 DragstartDetail。
2. 监听 OverScrollNotification 并开始拖动，同时使用drag.updateOverscrollNotification 方法中的 DragUpdateDetails更新拖动。
3. 在 ScrollEndNotification 上取消拖动。

为了保持想法简单，我只粘贴了选项卡页面的构建方法。

这个飞镖垫中有一个完整的工作示例。

  @override
  Widget build(BuildContext context) {
    // Local dragStartDetail.
    DragStartDetails dragStartDetails;
    // Current drag instance - should be instantiated on overscroll and updated alongside.
    Drag drag;
    return Column(
      children: <Widget>[
        TabBar(
          labelColor: Colors.green,
          indicatorColor: Colors.green,
          controller: _tabController,
          tabs: <Tab>[
            const Tab(text: "Dark"),
            const Tab(text: "Normal"),
            const Tab(text: "Light"),
          ],
        ),
        Expanded(
          child: NotificationListener(
            onNotification: (notification) {
              if (notification is ScrollStartNotification) {
                dragStartDetails = notification.dragDetails;
              }
              if (notification is OverscrollNotification) {
                drag = _pageController.position.drag(dragStartDetails, () {});
                drag.update(notification.dragDetails);
              }
              if (notification is ScrollEndNotification) {
                drag?.cancel();
              }
              return true;
            },
            child: TabBarView(
              controller: _tabController,
              children: <Widget>[
                Container(color: Colors.green[800]),
                Container(color: Colors.green),
                Container(color: Colors.green[200]),
              ],
            ),
          ),
        ),
      ],
    );
  }

旧答案

以上可能无法处理一些边缘情况。如果您需要更多控制，下面的代码提供了相同的结果，但您可以处理UserScrollNotification. 我粘贴这个是因为，它可能对其他想知道使用哪个方向滚动 wrt 轴的其他人有用ScrollView。

              if (notification is ScrollStartNotification) {
                dragStartDetails = notification.dragDetails;
              }

              if (notification is UserScrollNotification &&
                  notification.direction == ScrollDirection.forward &&
                  !_tabController.indexIsChanging &&
                  dragStartDetails != null &&
                  _tabController.index == 0) {
                _pageController.position.drag(dragStartDetails, () {});
              }

              // Simialrly Handle the last tab.
              if (notification is UserScrollNotification &&
                  notification.direction == ScrollDirection.reverse &&
                  !_tabController.indexIsChanging &&
                  dragStartDetails != null &&
                  _tabController.index == _tabController.length - 1) {
                _pageController.position.drag(dragStartDetails, () {});
              }