欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

关于Flutter ListView滑动及嵌套滑动的问题.

程序员文章站 2022-06-17 18:54:27
...

在Android内也经常碰到ScrollView嵌套ListView,嵌套RecyclerView,对于滑动的事件分发,需要进行处理,
比如说 NestedScrollView嵌套RecyclerView一般是创建一个自定义的LinearLayoutManager,将canScrollVertically()函数进行重写,返回false.
将RecyclerView的滑动交由NestedScrollView来进行处理

那么在Flutter内呢?
为了避免布局或者小键盘弹出,UI出现BOTTOM OVERFLOWED BY XX PIXELS的提示,一般是在最外层包装一个SingleChildScrollView
但是在实际UI布局上面SingleChildScrollView的children内填充一个ListView组件再正常不过了,

这样就会发现出现了滑动冲突,整个页面的滑动事件分发分成了2个部分,ListView的滑动区域及 非ListView区域SingleChildScrollView的滑动.
当ListView滑动到顶部或者底部,需要抬手,重新触摸在非ListView区域(即当前的屏幕的TouchEvent的X和Y坐标切换至非ListView部分)才可继续滑动整体页面.


对于这种滑动冲突的问题,解决办法和Android上面的滑动冲突解决办法一致.
那就是ListView的ScrollPhysics physics

在ListView或者GridView的构造函数都有一个参数,那就是ScrollPhysics physics.
分别有4种滑动模式:

  1. BouncingScrollPhysics

    IOS的滑动效果,及滑动到顶部或者底部,继续滑动,提供一个回弹的效果.
  2. ClampingScrollPhysics

    Android的滑动效果,及滑动到顶部或底部,继续滑动,提供一个浅色波纹的效果(波纹颜色根据ThemeData.accentColor控制)
  3. AlwaysScrollableScrollPhysics

    看名字就知道了,AlwaysScrollable
  4. NeverScrollableScrollPhysics

    同样是看名字就知道系列,NerverScrollable

当SingleChildScrollView内包含ListView,出现滑动冲突时,在ListView.builder()内添加
physics: NeverScrollableScrollPhysics()

@override
  Widget build(BuildContext context) {
    return SizedBox(
      height: ScreenUtil().setHeight(2700.0),
      child: ListView.builder(
          physics: NeverScrollableScrollPhysics(),
          itemCount: 3,
          itemBuilder: (context, index) => showRecommendItem(index)),
    );
  }