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

Question

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

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

我发现了一个关于倒置问题的问题：flutter PageView inside TabBarView: 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 所说，有一个类似的问题： Is it possible to swipe from an TabBarView content area to an adjacent PageView page?

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

Answer 1

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

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

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

为了简单起见，我只粘贴 Tabs 页面的构建方法。

dart pad 中提供了一个完整的工作示例。

  @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。我之所以粘贴这个，是因为它可能对其他想知道使用哪个方向滚动 w.r.t 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, () {});
              }

Answer 2

因此，当您到达选项卡的末尾时，您希望将页面视图向左滚动，并且在第一个选项卡上向右滚动时也是如此，我一直在考虑的是在进入时手动滑动页面视图这些情况如下：

index 值应该是标签栏页面之前和之后的页面索引。

pageController.animateToPage(index,
          duration: Duration(milliseconds: 500), curve: Curves.ease); 

here 是您正在寻找的完整代码，希望对您有所帮助！