Flutter

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

首先，您需要使用 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 方法来更改当前可见的页面。

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

Flutter - PageView - Only scroll when you swipe on top of a specific component instead of any location of the page

scroll

flutter-pageview