关于Flutter ListView滑动及嵌套滑动的问题.
在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种滑动模式:
-
BouncingScrollPhysics
IOS的滑动效果,及滑动到顶部或者底部,继续滑动,提供一个回弹的效果. -
ClampingScrollPhysics
Android的滑动效果,及滑动到顶部或底部,继续滑动,提供一个浅色波纹的效果(波纹颜色根据ThemeData.accentColor控制) -
AlwaysScrollableScrollPhysics
看名字就知道了,AlwaysScrollable -
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)),
);
}
推荐阅读
-
ScrollView中嵌套原生控件+WebView+原生控件出现的WebView滑动顶部的冲突问题。
-
ASP.NET Core中使用滑动窗口限流的问题及场景分析
-
Android中的拖拽及嵌套滑动
-
ScrollView和listview的冲突问题,关于宽度,和滑动
-
NoScrollViewPager解决嵌套listView依然可以滑动的问题
-
关于Flutter ListView滑动及嵌套滑动的问题.
-
解决Flutter的ListView嵌套ListView滑动冲突以及无限高度问题
-
网络网盘之ListView 的(CheckBox )滑动问题
-
解决BottomSheetDialog+Listview出现的滑动冲突问题
-
解决ListView与SwipeRefreshLayout滑动冲突的问题