flutter 中监听滑动事件
在移动端，各个平台或UI系统的原始指针事件模型基本都是一致，即：一次完整的事件分为三个阶段：手指按下、手指移动、和手指抬起，而更高级别的手势（如点击、双击、拖动等）都是基于这些原始事件的。
Flutter中可以使用Listenerwidget来监听原始触摸事件，它也是一个功能性widget。
Listener的常见属性
| 属性 | 类型 | 说明 |
|---|---|---|
| onPointerDown | (PointerDownEventevent){} | 手指按下时触发 |
| onPointerMove | (PointerDownEventevent){} | 手指在屏幕滑动时触发 |
| onPointerUp | (PointerDownEventevent){} | 手指离开屏幕时触发 |
| onPointerCancel | (PointerDownEventevent){} | 取消触摸时触发 |
Listener({
Keykey,
this.onPointerDown,//手指按下回调
this.onPointerMove,//手指移动回调
this.onPointerUp,//手指抬起回调
this.onPointerCancel,//触摸事件取消回调
this.behavior=HitTestBehavior.deferToChild,//在命中测试期间如何表现
Widgetchild
})
用法如下：
Listener(
onPointerDown:(dowPointEvent){},
onPointerMove:(movePointEvent){},
onPointerUp:(upPointEvent){},
child:Container(
child:Text('Listener的监听')
)
);
使用场景一：下拉刷新，上拉加载
如果实现下拉刷新，必须借助RefreshIndicator，在listview外面包裹一层RefreshIndicator，然后在RefreshIndicator里面实现onRefresh方法。监听的方法有很多种，就不一一阐述了，这里主要说一下经常使用的两种方法。
///下拉刷新，这里必须使用async，不然会报错 Future_refresh()async{ finalCompleter completer=newCompleter (); _dataList.clear();//清空数据 setState((){ page=1; }); loadData(completer);//加载数据 returncompleter.future; }
加载更多需要对ListView进行监听，所以需要进行监听器的设置，在State中进行监听器的初始化。
ScrollController_scrollController=newScrollController();//初始化滚动监听器，加载更多使用
1、直接监听_scrollController，根据是否滑动到底部来判断是否需要加载更多
_scrollController.addListener((){
//如果滑动到底部
if(_scrollController.position.pixels==_scrollController.position.maxScrollExtent){
//dosomething
}
});
RefreshIndicator(
onRefresh:_refresh,//下拉刷新
child:ListView.builder(
padding:EdgeInsets.only(bottom:Adapt.px(40)),
shrinkWrap:true,
controller:_scrollController,
physics:AlwaysScrollableScrollPhysics(),
itemCount:_dataList.length,
itemBuilder:(context,item){
returnlistCard(_dataList[item]);
}
)
)
2、使用上述的Listener来监听，通过Listener的onPointerMove（手指在屏幕上滑动）来监听滑动的距离，当滑动到底部时加载更多数据
newListener(
onPointerMove:(event){
varposition=event.position.distance;
vardetal=position-lastDownY;
if(detal>0){
print("================向下移动================");
}else{
//所摸点长度+滑动距离=IistView的长度说明到达底部
print("================向上移动================");
print("scrollController==滑动距离=======${(position-downY)}");
varscrollExtent=scrollController.position.maxScrollExtent;
print("scrollController==ListView最大长度===${scrollExtent}");
print("scrollController==所摸点长度===${scrollController.offset}");
print("scrollController==所摸点离屏幕距离===${position}");
varresult=scrollController.offset+(position-downY).abs();
if(result>=scrollExtent){
print("scrollController====到达底部");
lastListLength=scrollExtent;
loadMore();//加载更多数据
}
}
lastDownY=position;
},
child:newListView.builder(
controller:scrollController,
itemCount:datas==null?0:datas.length,
itemBuilder:(BuildContextcontext,intindex){
returnContainer(child:Text('列表${index}'))
}
)
);
使用场景二，滑动屏幕时，隐藏掉键盘
日常使用TextField时候，弹出来的键盘如果是按钮提交有时候会出现键盘不自动隐藏关闭的情况，可以触发关闭弹出来的键盘。
FocusScope.of(context).requestFocus(FocusNode());
//或者
FocusNode_foucusNode=newFocusNode();
_foucusNode.unfocus();
使用Listener监听，在滑动屏幕的时候关闭键盘
Listener(
onPointerMove:(movePointEvent){
_foucusNode.unfocus();
},
child:returnSingleChildScrollView(
controller:_scrollController,
child:Column(
children:[
//somewidget
],
)
)
)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。