flutter 中監(jiān)聽滑動(dòng)事件
在移動(dòng)端，各個(gè)平臺(tái)或 UI 系統(tǒng)的原始指針事件模型基本都是一致，即：一次完整的事件分為三個(gè)階段：手指按下、手指移動(dòng)、和手指抬起，而更高級(jí)別的手勢（如點(diǎn)擊、雙擊、拖動(dòng)等）都是基于這些原始事件的。
Flutter 中可以使用 Listener widget 來監(jiān)聽原始觸摸事件，它也是一個(gè)功能性 widget。
Listener 的常見屬性
| 屬性 | 類型 | 說明 |
|---|---|---|
| onPointerDown | (PointerDownEvent event){} | 手指按下時(shí)觸發(fā) |
| onPointerMove | (PointerDownEvent event){} | 手指在屏幕滑動(dòng)時(shí)觸發(fā) |
| onPointerUp | (PointerDownEvent event){} | 手指離開屏幕時(shí)觸發(fā) |
| onPointerCancel | (PointerDownEvent event){} | 取消觸摸時(shí)觸發(fā) |
Listener({
Key key,
this.onPointerDown, //手指按下回調(diào)
this.onPointerMove, //手指移動(dòng)回調(diào)
this.onPointerUp,//手指抬起回調(diào)
this.onPointerCancel,//觸摸事件取消回調(diào)
this.behavior = HitTestBehavior.deferToChild, //在命中測試期間如何表現(xiàn)
Widget child
})
用法如下：
Listener(
onPointerDown: (dowPointEvent){},
onPointerMove: (movePointEvent){},
onPointerUp: (upPointEvent){},
child: Container(
child: Text('Listener的監(jiān)聽')
)
);
使用場景一： 下拉刷新，上拉加載
如果實(shí)現(xiàn)下拉刷新，必須借助 RefreshIndicator，在 listview 外面包裹一層 RefreshIndicator，然后在 RefreshIndicator 里面實(shí)現(xiàn) onRefresh 方法。監(jiān)聽的方法有很多種，就不一一闡述了，這里主要說一下經(jīng)常使用的兩種方法。
/// 下拉刷新，這里必須使用async，不然會(huì)報(bào)錯(cuò)
Future<Null> _refresh() async {
final Completer<Null> completer = new Completer<Null>();
_dataList.clear(); // 清空數(shù)據(jù)
setState(() {
page = 1;
});
loadData(completer); // 加載數(shù)據(jù)
return completer.future;
}
加載更多需要對(duì) ListView 進(jìn)行監(jiān)聽，所以需要進(jìn)行監(jiān)聽器的設(shè)置，在 State 中進(jìn)行監(jiān)聽器的初始化。
ScrollController _scrollController = new ScrollController(); // 初始化滾動(dòng)監(jiān)聽器，加載更多使用
1、直接監(jiān)聽_scrollController，根據(jù)是否滑動(dòng)到底部來判斷是否需要加載更多
_scrollController.addListener(() {
// 如果滑動(dòng)到底部
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 來監(jiān)聽，通過 Listener 的 onPointerMove（手指在屏幕上滑動(dòng)）來監(jiān)聽滑動(dòng)的距離，當(dāng)滑動(dòng)到底部時(shí)加載更多數(shù)據(jù)
new Listener(
onPointerMove: (event) {
var position = event.position.distance;
var detal = position - lastDownY;
if (detal > 0) {
print("================向下移動(dòng)================");
} else {
// 所摸點(diǎn)長度 +滑動(dòng)距離 = IistView的長度 說明到達(dá)底部
print("================向上移動(dòng)================");
print("scrollController==滑動(dòng)距離=======${(position - downY)}");
var scrollExtent = scrollController.position.maxScrollExtent;
print("scrollController==ListView最大長度===${scrollExtent}");
print("scrollController==所摸點(diǎn)長度===${scrollController.offset}");
print("scrollController==所摸點(diǎn)離屏幕距離===${position}");
var result = scrollController.offset +(position - downY).abs();
if (result >= scrollExtent) {
print("scrollController====到達(dá)底部");
lastListLength = scrollExtent;
loadMore(); // 加載更多數(shù)據(jù)
}
}
lastDownY = position;
},
child: new ListView.builder(
controller: scrollController,
itemCount: datas == null ? 0 : datas.length,
itemBuilder: (BuildContext context, int index) {
return Container(child: Text('列表${index}') )
}
)
);
使用場景二 ， 滑動(dòng)屏幕時(shí)，隱藏掉鍵盤
日常使用 TextField 時(shí)候，彈出來的鍵盤如果是按鈕提交有時(shí)候會(huì)出現(xiàn)鍵盤不自動(dòng)隱藏關(guān)閉的情況，可以觸發(fā)關(guān)閉彈出來的鍵盤。
FocusScope.of(context).requestFocus(FocusNode());
// 或者
FocusNode _foucusNode = new FocusNode();
_foucusNode.unfocus();
使用 Listener 監(jiān)聽，在滑動(dòng)屏幕的時(shí)候關(guān)閉鍵盤
Listener(
onPointerMove: (movePointEvent){
_foucusNode.unfocus();
},
child: return SingleChildScrollView(
controller: _scrollController,
child: Column(
children: <Widget>[
// some widget
],
)
)
)
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Android開發(fā)自定義實(shí)時(shí)圖表控件實(shí)現(xiàn)示例
這篇文章主要為大家介紹了Android自定義實(shí)時(shí)圖表控件實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
這篇文章主要介紹了android的listview使用方法,需要的朋友可以參考下2014-02-02
本文主要介紹了Flutter路由之fluro的配置及跳轉(zhuǎn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Android仿微博個(gè)人詳情頁滾動(dòng)到頂部的實(shí)例代碼
這篇文章主要介紹了Android仿微博個(gè)人詳情頁滾動(dòng)到頂部的實(shí)例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒家，需要的朋友可以參考下2019-05-05
這篇文章主要介紹了Android積分簽到上移消失動(dòng)畫效果大致思路：動(dòng)畫部分，由一個(gè)垂直的平移和一個(gè)透明度變化的兩個(gè)動(dòng)畫組成。然后通過AnimationSet將兩個(gè)動(dòng)畫添加到集合，然后開始播放動(dòng)畫。2018-05-05
使用TransitionDrawable實(shí)現(xiàn)多張圖片淡入淡出效果
這篇文章主要為大家詳細(xì)介紹了使用TransitionDrawable實(shí)現(xiàn)多張圖片淡入淡出效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
Android項(xiàng)目開發(fā)常用工具類LightTaskUtils源碼介紹
Android系列---JSON數(shù)據(jù)解析的實(shí)例