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

Question

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

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

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

我看到 PageView 有 applyTo 方法，我只是不知道如何给它 ID（键）或 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

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

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

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

看一下GestureDetector小部件，它可用于监听滑动并更改PageView. 它可用于检测滑动：

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

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

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

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