flutter 中監(jiān)聽滑動(dòng)事件
在移動(dòng)端,各個(gè)平臺(tái)或 UI 系統(tǒng)的原始指針事件模型基本都是一致,即:一次完整的事件分為三個(gè)階段:手指按下、手指移動(dòng)、和手指抬起,而更高級(jí)別的手勢(shì)(如點(diǎn)擊、雙擊、拖動(dòng)等)都是基于這些原始事件的。
Flutter 中可以使用 Listener widget 來(lái)監(jiān)聽原始觸摸事件,它也是一個(gè)功能性 widget。
Listener 的常見屬性
| 屬性 | 類型 | 說(shuō)明 |
|---|---|---|
| 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, //在命中測(cè)試期間如何表現(xiàn)
Widget child
})
用法如下:
Listener(
onPointerDown: (dowPointEvent){},
onPointerMove: (movePointEvent){},
onPointerUp: (upPointEvent){},
child: Container(
child: Text('Listener的監(jiān)聽')
)
);
使用場(chǎng)景一: 下拉刷新,上拉加載
如果實(shí)現(xiàn)下拉刷新,必須借助 RefreshIndicator,在 listview 外面包裹一層 RefreshIndicator,然后在 RefreshIndicator 里面實(shí)現(xiàn) onRefresh 方法。監(jiān)聽的方法有很多種,就不一一闡述了,這里主要說(shuō)一下經(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)到底部來(lái)判斷是否需要加載更多
_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 來(lái)監(jiān)聽,通過(guò) Listener 的 onPointerMove(手指在屏幕上滑動(dòng))來(lái)監(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)長(zhǎng)度 +滑動(dòng)距離 = IistView的長(zhǎng)度 說(shuō)明到達(dá)底部
print("================向上移動(dòng)================");
print("scrollController==滑動(dòng)距離=======${(position - downY)}");
var scrollExtent = scrollController.position.maxScrollExtent;
print("scrollController==ListView最大長(zhǎng)度===${scrollExtent}");
print("scrollController==所摸點(diǎn)長(zhǎng)度===${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}') )
}
)
);
使用場(chǎng)景二 , 滑動(dòng)屏幕時(shí),隱藏掉鍵盤
日常使用 TextField 時(shí)候,彈出來(lái)的鍵盤如果是按鈕提交有時(shí)候會(huì)出現(xiàn)鍵盤不自動(dòng)隱藏關(guān)閉的情況,可以觸發(fā)關(guān)閉彈出來(lái)的鍵盤。
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
],
)
)
)
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持我們。
上一篇:Android SoundPool實(shí)現(xiàn)簡(jiǎn)短小音效
欄 目:Android
下一篇:Android使用SoundPool播放音效實(shí)例
本文標(biāo)題:flutter 中監(jiān)聽滑動(dòng)事件
本文地址:http://m.jygsgssxh.com/a1/Android/9029.html
您可能感興趣的文章
- 01-10如何給Flutter界面切換實(shí)現(xiàn)點(diǎn)特效
- 01-10Emoji表情在Android JNI中的兼容性問(wèn)題詳解
- 01-10android開發(fā)環(huán)境中SDK文件夾下的所需內(nèi)容詳解
- 01-10Flutter適配深色模式的方法(DarkMode)
- 01-10Flutter 滾動(dòng)監(jiān)聽及實(shí)戰(zhàn)appBar滾動(dòng)漸變的實(shí)現(xiàn)
- 01-10Flutter里面錯(cuò)誤捕獲的正確方法
- 01-10Android中butterknife的使用與自動(dòng)化查找組件插件詳解
- 01-10如何使用Flutter實(shí)現(xiàn)58同城中的加載動(dòng)畫詳解
- 01-10詳解Android 8.1.0 Service 中 彈出 Dialog的方法
- 01-10android監(jiān)聽器實(shí)例代碼


閱讀排行
- 1C語(yǔ)言 while語(yǔ)句的用法詳解
- 2java 實(shí)現(xiàn)簡(jiǎn)單圣誕樹的示例代碼(圣誕
- 3利用C語(yǔ)言實(shí)現(xiàn)“百馬百擔(dān)”問(wèn)題方法
- 4C語(yǔ)言中計(jì)算正弦的相關(guān)函數(shù)總結(jié)
- 5c語(yǔ)言計(jì)算三角形面積代碼
- 6什么是 WSH(腳本宿主)的詳細(xì)解釋
- 7C++ 中隨機(jī)函數(shù)random函數(shù)的使用方法
- 8正則表達(dá)式匹配各種特殊字符
- 9C語(yǔ)言十進(jìn)制轉(zhuǎn)二進(jìn)制代碼實(shí)例
- 10C語(yǔ)言查找數(shù)組里數(shù)字重復(fù)次數(shù)的方法
本欄相關(guān)
- 01-10Android自定義View之繪制圓形頭像功能
- 01-10Android實(shí)現(xiàn)雙擊返回鍵退出應(yīng)用實(shí)現(xiàn)方
- 01-10android實(shí)現(xiàn)簡(jiǎn)單計(jì)算器功能
- 01-10android實(shí)現(xiàn)記住用戶名和密碼以及自動(dòng)
- 01-10C++自定義API函數(shù)實(shí)現(xiàn)大數(shù)相乘算法
- 01-10Android 友盟第三方登錄與分享的實(shí)現(xiàn)代
- 01-10android實(shí)現(xiàn)指紋識(shí)別功能
- 01-10如何給Flutter界面切換實(shí)現(xiàn)點(diǎn)特效
- 01-10Android實(shí)現(xiàn)圓形漸變加載進(jìn)度條
- 01-10Emoji表情在Android JNI中的兼容性問(wèn)題詳
隨機(jī)閱讀
- 08-05織夢(mèng)dedecms什么時(shí)候用欄目交叉功能?
- 01-10delphi制作wav文件的方法
- 01-10C#中split用法實(shí)例總結(jié)
- 04-02jquery與jsp,用jquery
- 08-05dedecms(織夢(mèng))副欄目數(shù)量限制代碼修改
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 01-10使用C語(yǔ)言求解撲克牌的順子及n個(gè)骰子
- 01-11ajax實(shí)現(xiàn)頁(yè)面的局部加載
- 08-05DEDE織夢(mèng)data目錄下的sessions文件夾有什


