flutter 中监听滑动事件
作者:tabbin 时间:2021-10-05 11:39:00
在移动端,各个平台或 UI 系统的原始指针事件模型基本都是一致,即:一次完整的事件分为三个阶段:手指按下、手指移动、和手指抬起,而更高级别的手势(如点击、双击、拖动等)都是基于这些原始事件的。
Flutter 中可以使用 Listener widget 来监听原始触摸事件,它也是一个功能性 widget。
Listener 的常见属性
属性 | 类型 | 说明 |
---|---|---|
onPointerDown | (PointerDownEvent event){} | 手指按下时触发 |
onPointerMove | (PointerDownEvent event){} | 手指在屏幕滑动时触发 |
onPointerUp | (PointerDownEvent event){} | 手指离开屏幕时触发 |
onPointerCancel | (PointerDownEvent event){} | 取消触摸时触发 |
Listener({
Key key,
this.onPointerDown, //手指按下回调
this.onPointerMove, //手指移动回调
this.onPointerUp,//手指抬起回调
this.onPointerCancel,//触摸事件取消回调
this.behavior = HitTestBehavior.deferToChild, //在命中测试期间如何表现
Widget child
})
用法如下:
Listener(
onPointerDown: (dowPointEvent){},
onPointerMove: (movePointEvent){},
onPointerUp: (upPointEvent){},
child: Container(
child: Text('Listener的监听')
)
);
使用场景一: 下拉刷新,上拉加载
如果实现下拉刷新,必须借助 RefreshIndicator,在 listview 外面包裹一层 RefreshIndicator,然后在 RefreshIndicator 里面实现 onRefresh 方法。监听的方法有很多种,就不一一阐述了,这里主要说一下经常使用的两种方法。
/// 下拉刷新,这里必须使用async,不然会报错
Future<Null> _refresh() async {
final Completer<Null> completer = new Completer<Null>();
_dataList.clear(); // 清空数据
setState(() {
page = 1;
});
loadData(completer); // 加载数据
return completer.future;
}
加载更多需要对 ListView 进行监听,所以需要进行 * 的设置,在 State 中进行 * 的初始化。
ScrollController _scrollController = new ScrollController(); // 初始化滚动 * ,加载更多使用
1、直接监听_scrollController,根据是否滑动到底部来判断是否需要加载更多
_scrollController.addListener(() {
// 如果滑动到底部
if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
// do something
}
});
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) {
return listCard(_dataList[item]);
}
)
)
2、使用上述的 Listener 来监听,通过 Listener 的 onPointerMove(手指在屏幕上滑动)来监听滑动的距离,当滑动到底部时加载更多数据
new Listener(
onPointerMove: (event) {
var position = event.position.distance;
var detal = position - lastDownY;
if (detal > 0) {
print("================向下移动================");
} else {
// 所摸点长度 +滑动距离 = IistView的长度 说明到达底部
print("================向上移动================");
print("scrollController==滑动距离=======${(position - downY)}");
var scrollExtent = scrollController.position.maxScrollExtent;
print("scrollController==ListView最大长度===${scrollExtent}");
print("scrollController==所摸点长度===${scrollController.offset}");
print("scrollController==所摸点离屏幕距离===${position}");
var result = scrollController.offset +(position - downY).abs();
if (result >= scrollExtent) {
print("scrollController====到达底部");
lastListLength = scrollExtent;
loadMore(); // 加载更多数据
}
}
lastDownY = position;
},
child: new ListView.builder(
controller: scrollController,
itemCount: datas == null ? 0 : datas.length,
itemBuilder: (BuildContext context, int index) {
return Container(child: Text('列表${index}') )
}
)
);
使用场景二 , 滑动屏幕时,隐藏掉键盘
日常使用 TextField 时候,弹出来的键盘如果是按钮提交有时候会出现键盘不自动隐藏关闭的情况,可以触发关闭弹出来的键盘。
FocusScope.of(context).requestFocus(FocusNode());
// 或者
FocusNode _foucusNode = new FocusNode();
_foucusNode.unfocus();
使用 Listener 监听,在滑动屏幕的时候关闭键盘
Listener(
onPointerMove: (movePointEvent){
_foucusNode.unfocus();
},
child: return SingleChildScrollView(
controller: _scrollController,
child: Column(
children: <Widget>[
// some widget
],
)
)
)
来源:https://learnku.com/articles/30338
标签:flutter,监听,滑动
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
SpringBoot找不到映射文件的处理方式
2023-10-15 07:40:11
![](https://img.aspxhome.com/file/2023/7/72527_0s.png)
学习Winform文本类控件(Label、Button、TextBox)
2022-12-29 09:00:48
![](https://img.aspxhome.com/file/2023/5/86985_0s.png)
Java读取TXT文件内容的方法
2023-11-23 22:33:41
C#创建Windows服务与服务的安装、卸载
2022-12-25 00:46:58
![](https://img.aspxhome.com/file/2023/8/102208_0s.png)
Spring Security 控制授权的方法
2023-08-06 19:21:08
![](https://img.aspxhome.com/file/2023/4/58024_0s.png)
C#实现自定义动画鼠标的示例详解
2021-07-31 17:16:59
![](https://img.aspxhome.com/file/2023/4/106424_0s.png)
SpringBoot、mybatis返回树结构的数据实现
2022-05-12 18:56:08
![](https://img.aspxhome.com/file/2023/5/77365_0s.png)
java垃圾回收原理之GC算法基础
2023-10-05 16:10:09
![](https://img.aspxhome.com/file/2023/2/87352_0s.png)
Java实现经典游戏复杂迷宫
2021-05-29 22:33:34
![](https://img.aspxhome.com/file/2023/1/63301_0s.png)
java中超过long范围的超大整数相加算法详解(面试高频)
2022-09-15 11:22:05
![](https://img.aspxhome.com/file/2023/0/61850_0s.png)
使用SpringDataJpa创建中间表
2023-11-23 18:01:28
C#短时间内产生大量不重复的随机数
2023-11-28 00:15:53
Java NIO中四大核心组件的使用详解
2023-10-19 17:05:13
详解C# Lazy Loading(延迟加载)
2021-09-02 03:02:58
![](https://img.aspxhome.com/file/2023/8/110178_0s.png)
java8新特性之日期时间API
2023-06-20 09:15:50
![](https://img.aspxhome.com/file/2023/2/57602_0s.png)
关于MyBatis模糊查询的几种实现方式
2023-05-09 04:23:12
java 中模式匹配算法-KMP算法实例详解
2022-01-30 09:08:08
![](https://img.aspxhome.com/file/2023/7/63807_0s.jpg)
Android编程开发之TextView单击链接弹出Activity的方法
2023-08-06 18:27:11
![](https://img.aspxhome.com/file/2023/4/83544_0s.png)
关于SpringBoot3.x中spring.factories功能被移除的解决方案
2022-03-25 03:04:33
![](https://img.aspxhome.com/file/2023/8/95038_0s.png)
C# 语言入门基础介绍
2022-03-02 13:32:33