Flutter 小技巧之 ListView 和 PageView 的各种花式嵌套

发布时间：2023-09-05 18:00

这次的 Flutter 小技巧是 ListView 和 PageView 的花式嵌套，不同 Scrollable 的嵌套冲突问题相信大家不会陌生，今天就通过 ListView 和 PageView 的三种嵌套模式带大家收获一些不一样的小技巧。

正常嵌套

最常见的嵌套应该就是横向 PageView 加纵向 ListView 的组合，一般情况下这个组合不会有什么问题，除非你硬是要斜着滑。

最近刚好遇到好几个人同时在问：“斜滑 ListView 容易切换到 PageView 滑动” 的问题，如下 GIF 所示，当用户在滑动 ListView 时，滑动角度带上倾斜之后，可能就会导致滑动的是 PageView 而不是 ListView 。

Flutter 小技巧之 ListView 和 PageView 的各种花式嵌套_第1张图片

虽然从我个人体验上并不觉得这是个问题，但是如果产品硬是要你修改，难道要自己重写 PageView 的手势响应吗？

我们简单看一下，不管是 PageView 还是 ListView 它们的滑动效果都来自于 Scrollable ，而 Scrollable 内部针对不同方向的响应，是通过 RawGestureDetector 完成：

  • VerticalDragGestureRecognizer 处理垂直方向的手势
  • HorizontalDragGestureRecognizer 处理水平方向的手势

所以简单看它们响应的判断逻辑，可以看到一个很有趣的方法 computeHitSlop ： 根据 pointer 的类型确定当然命中需要的最小像素，触摸默认是 kTouchSlop (18.0)。

Flutter 小技巧之 ListView 和 PageView 的各种花式嵌套_第2张图片

看到这你有没有灵光一闪：如果我们把 PageView 的 touchSlop 修改了，是不是就可以调整它响应的灵敏度？ 恰好在 computeHitSlop 方法里，它可以通过 DeviceGestureSettings 来配置，而 DeviceGestureSettings 来自于 MediaQuery ，所以如下代码所示：

body: MediaQuery(
  ///调高 touchSlop 到 50 ，这样 pageview 滑动可能有点点影响，
  ///但是大概率处理了斜着滑动触发的问题
  data: MediaQuery.of(context).copyWith(
      gestureSettings: DeviceGestureSettings(
    touchSlop: 50,
  )),
  child: PageView(
    scrollDirection: Axis.horizontal,
    pageSnapping: true,
    children: [
      HandlerListView(),
      HandlerListView(),
    ],
  ),
),

小技巧一：通过嵌套一个 MediaQuery ，然后调整 gestureSettings 的 touchSlop 从而修改 PageView 的灵明度 ，另外不要忘记，还需要把 ListView 的 touchSlop 切换会默认 的 kTouchSlop ：

class HandlerListView extends StatefulWidget {
  @override
  _MyListViewState createState() => _MyListViewState();
}
class _MyListViewState extends State {
  @override
  Widget build(BuildContext context) {
    return MediaQuery(
      ///这里 touchSlop  需要调回默认
      data: MediaQuery.of(context).copyWith(
          gestureSettings: DeviceGestureSettings(
        touchSlop: kTouchSlop,
      )),
      child: ListView.separated(
        itemCount: 15,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('Item $index'),
          );
        },
        separatorBuilder: (context, index) {
          return const Divider(
            thickness: 3,
          );
        },
      ),
    );
  }
}

最后我们看一下效果，如下 GIF 所示，现在就算你斜着滑动，也很触发 PageView 的水平滑动，只有横向移动时才会触发 PageView 的手势，当然， 如果要说这个粗暴的写法有什么问题的话，大概就是降低了 PageView 响应的灵敏度。

Flutter 小技巧之 ListView 和 PageView 的各种花式嵌套_第3张图片

同方向 PageView 嵌套 ListView

介绍完常规使用，接着来点不一样的，在垂直切换的 PageView 里嵌套垂直滚动的 ListView ， 你第一感觉是不是觉得不靠谱，为什么会有这样的场景？

对于产品来说，他们不会考虑你如何实现的问题，他们只会拍着脑袋说淘宝可以，为什么你不行，所以如果是你，你会怎么做？

而关于这个需求，社区目前讨论的结果是：把 PageView 和 ListView 的滑动禁用，然后通过 RawGestureDetector 自己管理。

如果对实现逻辑分析没兴趣，可以直接看本小节末尾的 源码链接 。

看到自己管理先不要慌，虽然要自己实现 PageView 和 ListView 的手势分发，但是其实并不需要重写 PageView 和 ListView ，我们可以复用它们的 Darg 响应逻辑，如下代码所示：

  • 通过 NeverScrollableScrollPhysics 禁止了 PageView 和 ListView 的滚动效果
  • 通过顶部 RawGestureDetector 的 VerticalDragGestureRecognizer 自己管理手势事件
  • 配置 PageController 和 ScrollController 用于获取状态
body: RawGestureDetector(
  gestures: {
    VerticalDragGestureRecognizer: GestureRecognizerFactoryWithHandlers<
            VerticalDragGestureRecognizer>(
        () => VerticalDragGestureRecognizer(),
        (VerticalDragGestureRecognizer instance) {
      instance
        ..onStart = _handleDragStart
        ..onUpdate = _handleDragUpdate
        ..onEnd = _handleDragEnd
        ..onCancel = _handleDragCancel;
    })
  },
  behavior: HitTestBehavior.opaque,
  child: PageView(
    controller: _pageController,
    scrollDirection: Axis.vertical,
    ///屏蔽默认的滑动响应
    physics: const NeverScrollableScrollPhysics(),
    children: [
      ListView.builder(
        controller: _listScrollController,
        ///屏蔽默认的滑动响应
        physics: const NeverScrollableScrollPhysics(),
        itemBuilder: (context, index) {
          return ListTile(title: Text('List Item $index'));
        },
        itemCount: 30,
      ),
      Container(
        color: Colors.green,
        child: Center(
          child: Text(
            'Page View',
            style: TextStyle(fontSize: 50),
          ),
        ),
      )
    ],
  ),
),

接着我们看 _handleDragStart 实现，如下代码所示，在产生手势 details 时，我们主要判断：

  • 通过 ScrollController 判断 ListView 是否可见
  • 判断触摸位置是否在 ListIView 范围内
  • 根据状态判断通过哪个 Controller 去生产 Drag 对象，用于响应后续的滑动事件

  void _handleDragStart(DragStartDetails details) {
    ///先判断 Listview 是否可见或者可以调用
    ///一般不可见时 hasClients false ，因为 PageView 也没有 keepAlive
    if (_listScrollController?.hasClients == true &&
        _listScrollController?.position.context.storageContext != null) {
      ///获取 ListView 的  renderBox
      final RenderBox? renderBox = _listScrollController
          ?.position.context.storageContext
          .findRenderObject() as RenderBox;

      ///判断触摸的位置是否在 ListView 内
      ///不在范围内一般是因为 ListView 已经滑动上去了，坐标位置和触摸位置不一致
      if (renderBox?.paintBounds
              .shift(renderBox.localToGlobal(Offset.zero))
              .contains(details.globalPosition) ==
          true) {
        _activeScrollController = _listScrollController;
        _drag = _activeScrollController?.position.drag(details, _disposeDrag);
        return;
      }
    }

    ///这时候就可以认为是 PageView 需要滑动
    _activeScrollController = _pageController;
    _drag = _pageController?.position.drag(details, _disposeDrag);
  }

前面我们主要在触摸开始时，判断需要响应的对象时 ListView 还是 PageView ，然后通过 _activeScrollController 保存当然响应对象，并且通过 Controller 生成用于响应手势信息的 Drag 对象。

简单说：滑动事件发生时，默认会建立一个 Drag 用于处理后续的滑动事件，Drag 会对原始事件进行加工之后再给到 ScrollPosition 去触发后续滑动效果。

接着在 _handleDragUpdate 方法里，主要是判断响应是不是需要切换到 PageView :

  • 如果不需要就继续用前面得到的 _drag?.update(details)响应 ListView 滚动
  • 如果需要就通过 _pageController 切换新的 _drag 对象用于响应
void _handleDragUpdate(DragUpdateDetails details) {
  if (_activeScrollController == _listScrollController &&

      ///手指向上移动，也就是快要显示出底部 PageView
      details.primaryDelta! < 0 &&

      ///到了底部，切换到 PageView
      _activeScrollController?.position.pixels ==
          _activeScrollController?.position.maxScrollExtent) {
    ///切换相应的控制器
    _activeScrollController = _pageController;
    _drag?.cancel();

    ///参考  Scrollable 里
    ///因为是切换控制器，也就是要更新 Drag
    ///拖拽流程要切换到 PageView 里，所以需要  DragStartDetails
    ///所以需要把 DragUpdateDetails 变成 DragStartDetails
    ///提取出 PageView 里的 Drag 相应 details
    _drag = _pageController?.position.drag(
        DragStartDetails(
            globalPosition: details.globalPosition,
            localPosition: details.localPosition),
        _disposeDrag);
  }
  _drag?.update(details);
}

这里有个小知识点：如上代码所示，我们可以简单通过 details.primaryDelta 判断滑动方向和移动的是否是主轴

最后如下 GIF 所示，可以看到 PageView 嵌套 ListView 同方向滑动可以正常运行了，但是目前还有个两个小问题，从图示可以看到：

  • 在切换之后 ListView 的位置没有保存下来
  • 产品要求去除 ListView 的边缘溢出效果

Flutter 小技巧之 ListView 和 PageView 的各种花式嵌套_第4张图片

所以我们需要对 ListView 做一个 KeepAlive ，然后用简单的方法去除 Android 边缘滑动的 Material 效果：

  • 通过 with AutomaticKeepAliveClientMixin 让 ListView 在切换之后也保持滑动位置
  • 通过 ScrollConfiguration.of(context).copyWith(overscroll: false) 快速去除 Scrollable 的边缘 Material 效果
child: PageView(
  controller: _pageController,
  scrollDirection: Axis.vertical,
  ///去掉 Android 上默认的边缘拖拽效果
  scrollBehavior:
      ScrollConfiguration.of(context).copyWith(overscroll: false),


///对 PageView 里的 ListView 做 KeepAlive 记住位置
class KeepAliveListView extends StatefulWidget {
  final ScrollController? listScrollController;
  final int itemCount;

  KeepAliveListView({
    required this.listScrollController,
    required this.itemCount,
  });

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

class KeepAliveListViewState extends State
    with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return ListView.builder(
      controller: widget.listScrollController,

      ///屏蔽默认的滑动响应
      physics: const NeverScrollableScrollPhysics(),
      itemBuilder: (context, index) {
        return ListTile(title: Text('List Item $index'));
      },
      itemCount: widget.itemCount,
    );
  }

  @override
  bool get wantKeepAlive => true;
}

所以这里我们有解锁了另外一个小技巧：通过 ScrollConfiguration.of(context).copyWith(overscroll: false) 快速去除 Android 滑动到边缘的 Material 2效果，为什么说 Material2， 因为 Material3 上变了，具体可见： Flutter 3 下的 ThemeExtensions 和 Material3 。

Flutter 小技巧之 ListView 和 PageView 的各种花式嵌套_第5张图片

本小节源码可见： https://github.com/CarGuo/gsy_flutter_demo/blob/7838971cefbf19bb53a71041cd100c4c15eb6443/lib/widget/vp_list_demo_page.dart#L75

同方向 ListView 嵌套 PageView

那还有没有更非常规的？答案是肯定的，毕竟产品的小脑袋，怎么会想不到在垂直滑动的 ListView 里嵌套垂直切换的 PageView 这种需求。

有了前面的思路，其实实现这个逻辑也是异曲同工：把 PageView 和 ListView 的滑动禁用，然后通过 RawGestureDetector 自己管理，不同的就是手势方法分发的差异。

RawGestureDetector(
          gestures: {
            VerticalDragGestureRecognizer: GestureRecognizerFactoryWithHandlers<
                    VerticalDragGestureRecognizer>(
                () => VerticalDragGestureRecognizer(),
                (VerticalDragGestureRecognizer instance) {
              instance
                ..onStart = _handleDragStart
                ..onUpdate = _handleDragUpdate
                ..onEnd = _handleDragEnd
                ..onCancel = _handleDragCancel;
            })
          },
          behavior: HitTestBehavior.opaque,
          child: ListView.builder(
                ///屏蔽默认的滑动响应
                physics: NeverScrollableScrollPhysics(),
                controller: _listScrollController,
                itemCount: 5,
                itemBuilder: (context, index) {
                  if (index == 0) {
                    return Container(
                      height: 300,
                      child: KeepAlivePageView(
                        pageController: _pageController,
                        itemCount: itemCount,
                      ),
                    );
                  }
                  return Container(
                      height: 300,
                      color: Colors.greenAccent,
                      child: Center(
                        child: Text(
                          "Item $index",
                          style: TextStyle(fontSize: 40, color: Colors.blue),
                        ),
                      ));
                }),
        )

同样是在 _handleDragStart 方法里，这里首先需要判断：

  • ListView 如果已经滑动过，就不响应顶部 PageView 的事件
  • 如果此时 ListView 处于顶部未滑动，判断手势位置是否在 PageView 里，如果是响应 PageView 的事件
  void _handleDragStart(DragStartDetails details) {
    ///只要不是顶部，就不响应 PageView 的滑动
    ///所以这个判断只支持垂直 PageView 在  ListView 的顶部
    if (_listScrollController.offset > 0) {
      _activeScrollController = _listScrollController;
      _drag = _listScrollController.position.drag(details, _disposeDrag);
      return;
    }

    ///此时处于  ListView 的顶部
    if (_pageController.hasClients) {
      ///获取 PageView
      final RenderBox renderBox =
          _pageController.position.context.storageContext.findRenderObject()
              as RenderBox;

      ///判断触摸范围是不是在 PageView
      final isDragPageView = renderBox.paintBounds
          .shift(renderBox.localToGlobal(Offset.zero))
          .contains(details.globalPosition);

      ///如果在 PageView 里就切换到 PageView
      if (isDragPageView) {
        _activeScrollController = _pageController;
        _drag = _activeScrollController.position.drag(details, _disposeDrag);
        return;
      }
    }

    ///不在 PageView 里就继续响应 ListView
    _activeScrollController = _listScrollController;
    _drag = _listScrollController.position.drag(details, _disposeDrag);
  }

接着在 _handleDragUpdate 方法里，判断如果 PageView 已经滑动到最后一页，也将滑动事件切换到 ListView

void _handleDragUpdate(DragUpdateDetails details) {
  var scrollDirection = _activeScrollController.position.userScrollDirection;

  ///判断此时响应的如果还是 _pageController，是不是到了最后一页
  if (_activeScrollController == _pageController &&
      scrollDirection == ScrollDirection.reverse &&

      ///是不是到最后一页了，到最后一页就切换回 pageController
      (_pageController.page != null &&
          _pageController.page! >= (itemCount - 1))) {
    ///切换回 ListView
    _activeScrollController = _listScrollController;
    _drag?.cancel();
    _drag = _listScrollController.position.drag(
        DragStartDetails(
            globalPosition: details.globalPosition,
            localPosition: details.localPosition),
        _disposeDrag);
  }
  _drag?.update(details);
}

当然，同样还有 KeepAlive 和去除列表 Material 边缘效果，最后运行效果如下 GIF 所示。

Flutter 小技巧之 ListView 和 PageView 的各种花式嵌套_第6张图片

本小节源码可见：https://github.com/CarGuo/gsy_flutter_demo/blob/7838971cefbf19bb53a71041cd100c4c15eb6443/lib/widget/vp_list_demo_page.dart#L262

最后再补充一个小技巧：如果你需要 Flutter 打印手势竞技的过程，可以配置 debugPrintGestureArenaDiagnostics = true;来让 Flutter 输出手势竞技的处理过程。

import 'package:flutter/gestures.dart';
void main() {
  debugPrintGestureArenaDiagnostics = true;
  runApp(MyApp());
}

Flutter 小技巧之 ListView 和 PageView 的各种花式嵌套_第7张图片

最后

最后总结一下，本篇介绍了如何通过 Darg 解决各种因为嵌套而导致的手势冲突，相信大家也知道了如何利用 Controller 和 Darg 来快速自定义一些滑动需求，例如 ListView 联动 ListView 的差量滑动效果：

///listView 联动 listView
class ListViewLinkListView extends StatefulWidget {
  @override
  _ListViewLinkListViewState createState() => _ListViewLinkListViewState();
}

class _ListViewLinkListViewState extends State {
  ScrollController _primaryScrollController = ScrollController();
  ScrollController _subScrollController = ScrollController();

  Drag? _primaryDrag;
  Drag? _subDrag;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    _primaryScrollController.dispose();
    _subScrollController.dispose();
    super.dispose();
  }

  void _handleDragStart(DragStartDetails details) {
    _primaryDrag =
        _primaryScrollController.position.drag(details, _disposePrimaryDrag);
    _subDrag = _subScrollController.position.drag(details, _disposeSubDrag);
  }

  void _handleDragUpdate(DragUpdateDetails details) {
    _primaryDrag?.update(details);

    ///除以10实现差量效果
    _subDrag?.update(DragUpdateDetails(
        sourceTimeStamp: details.sourceTimeStamp,
        delta: details.delta / 30,
        primaryDelta: (details.primaryDelta ?? 0) / 30,
        globalPosition: details.globalPosition,
        localPosition: details.localPosition));
  }

  void _handleDragEnd(DragEndDetails details) {
    _primaryDrag?.end(details);
    _subDrag?.end(details);
  }

  void _handleDragCancel() {
    _primaryDrag?.cancel();
    _subDrag?.cancel();
  }

  void _disposePrimaryDrag() {
    _primaryDrag = null;
  }

  void _disposeSubDrag() {
    _subDrag = null;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("ListViewLinkListView"),
        ),
        body: RawGestureDetector(
          gestures: {
            VerticalDragGestureRecognizer: GestureRecognizerFactoryWithHandlers<
                    VerticalDragGestureRecognizer>(
                () => VerticalDragGestureRecognizer(),
                (VerticalDragGestureRecognizer instance) {
              instance
                ..onStart = _handleDragStart
                ..onUpdate = _handleDragUpdate
                ..onEnd = _handleDragEnd
                ..onCancel = _handleDragCancel;
            })
          },
          behavior: HitTestBehavior.opaque,
          child: ScrollConfiguration(
            ///去掉 Android 上默认的边缘拖拽效果
            behavior:
                ScrollConfiguration.of(context).copyWith(overscroll: false),
            child: Row(
              children: [
                new Expanded(
                    child: ListView.builder(

                        ///屏蔽默认的滑动响应
                        physics: NeverScrollableScrollPhysics(),
                        controller: _primaryScrollController,
                        itemCount: 55,
                        itemBuilder: (context, index) {
                          return Container(
                              height: 300,
                              color: Colors.greenAccent,
                              child: Center(
                                child: Text(
                                  "Item $index",
                                  style: TextStyle(
                                      fontSize: 40, color: Colors.blue),
                                ),
                              ));
                        })),
                new SizedBox(
                  width: 5,
                ),
                new Expanded(
                  child: ListView.builder(

                      ///屏蔽默认的滑动响应
                      physics: NeverScrollableScrollPhysics(),
                      controller: _subScrollController,
                      itemCount: 55,
                      itemBuilder: (context, index) {
                        return Container(
                          height: 300,
                          color: Colors.deepOrange,
                          child: Center(
                            child: Text(
                              "Item $index",
                              style:
                                  TextStyle(fontSize: 40, color: Colors.white),
                            ),
                          ),
                        );
                      }),
                ),
              ],
            ),
          ),
        ));
  }
}

相关推荐

OpenCV：01图片&视频的加载显示

Python中5种下划线的含义，你都知道吗

深度｜为什么一定要从DevOps走向BizDevOps？

人生第一段可以实现一定功能的代码

内存常见问题与调试技巧 ——C语言最大难点揭秘

async和await用法介绍

基于Java 利用Mybatis实现oracle批量插入及分页查询

MyBatis在注解上使用动态SQL方式(@select使用if)

Hadoop分布式文件系统——HDFS介绍

VScode个人开发常用的键盘快捷键（Mac版）

深度学习笔记（三十四）经典卷积神经网络：LeNet-5 AlexNet VGG-16

跟着官方文档学DGL框架第八天——训练图神经网络之节点分类

Elasticsearch 实现分页的 3 种方式，还有谁不会？？

CSS -- Margin Collapsing

vue 简单入门

超强VM虚拟机「支持12系统」最新中文版

VUE之Element-ui文件上传详解

《数据仓库设计与开发.pdf》限时开放下载！

Python基础/Python进阶一对一答疑

java各种优秀开源库收集

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网，如有侵权请联系：561261067@qq.com

桂ICP备16001015号