Flutter - PageView - 仅当您在特定组件而不是页面的任何位置滑动时才滚动

Question

对 Flutter 完全陌生，不到 10 小时。

我有一个处理 3 页的 PageView，它可以完美地水平滚动。

但我想更改“允许滑动”区域。我不想让用户更改从页面的任何位置滚动的页面，而是，例如，如果他在 AppBar 组件上滑动，就让他滚动页面。

我看到 PageView 有 applyTo 方法，我只是不知道如何给它 ID(keys) 或 appBar 看看这是否可行。

有没有办法实现这种“只有当用户在组件 X 上滑动时才滚动”？

---

编辑 1

Alberto Miola 建议的解决方案就像一个魅力，这是我的代码（我必须从 PreferredSizeWidget 实现，因为需要修改 AppBar）。

class GestureDetectorForAppBar extends StatelessWidget implements PreferredSizeWidget {
  final double height;
  final AppBar appbar;
  final GestureDragUpdateCallback onPanUpdate;

  GestureDetectorForAppBar({
    Key key,
    this.appbar,
    this.onPanUpdate,
    @required this.height,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(child: this.appbar, onPanUpdate: this.onPanUpdate,);
  }

  @override
  Size get preferredSize => Size.fromHeight(height);
}

Answer 1

首先，您需要使用NeverScrollableScrollPhysics 来“阻止”PageView 本身的滑动手势：

PageView(
  physics: const NeverScrollableScrollPhysics(),
  children: [...],
  controller: ...
);

注意const 构造函数的用法。这样，您将无法用手指在页面之间移动。在 Flutter 中，你有 widgets 而不是 components。

---

看看GestureDetector 小部件，它可用于监听滑动并更改PageView 的当前可见内容。它可用于检测滑动：

GestureDetector(
  onPanUpdate: (data) {
    if (data.delta.dx > 0) {
      // right swipe
    } 

    if (data.delta.dx < 0) {
      // right swipe
    }
  }
);

---

按顺序，我建议你先阅读官方文档中关于NeverScrollableScrollPhysics()的内容。它用于“阻止”滚动行为。然后，使用GestureDetector() 包装您想要用作“滚动控制器”（实际滚动页面的那个）的小部件。

在onPanUpdate 中，您将处理PageController 的animateToPage 方法来更改当前可见的页面。