詳解Flutter如何使用Completer實(shí)現(xiàn)防抖功能
在Flutter
中,Completer
可以用來(lái)實(shí)現(xiàn)防抖功能。防抖是用于確保時(shí)間內(nèi)的所有觸發(fā)被合并成單一請(qǐng)求。對(duì)于連續(xù)的事件觸發(fā)(如用戶(hù)的鍵盤(pán)輸入、按鈕的連續(xù)點(diǎn)擊),只有在指定的延遲時(shí)間內(nèi)沒(méi)有再次觸發(fā)事件時(shí),才執(zhí)行實(shí)際的操作。
下面是如何使用 Completer
來(lái)實(shí)現(xiàn)異步防抖的一個(gè)示例,代碼如下:
import 'dart:async'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Drag to Sort', home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { final List<String> _items = List<String>.generate(10, (i) => 'Item $i'); bool _isReorderable = false; @override void initState() { // TODO: implement initState super.initState(); var debouncer = Debouncer(delay: Duration(seconds: 1)); // 模擬快速連續(xù)觸發(fā)事件 debouncer.run(() => print('Action 1')); debouncer.run(() => print('Action 2')); debouncer.run(() => print('Action 3')); // 等待一秒后執(zhí)行 Future.delayed(Duration(seconds: 2), () { debouncer.run(() => print('Action after delay')); }); } @override Widget build(BuildContext context) { return Scaffold( // backgroundColor: Colors.blueAccent, appBar: AppBar( title: Text('Test'), ), body: Column(children: [ _buildContainer(Colors.lightBlue,const Flexible( child: Text("這是一個(gè)項(xiàng)目",maxLines: 1,overflow: TextOverflow.ellipsis,))), _buildContainer(Colors.red, const Flexible( fit: FlexFit.tight, child: Text("這是一個(gè)項(xiàng)目",maxLines: 1,overflow: TextOverflow.ellipsis,))), _buildContainer(Colors.purple, Flexible( fit: FlexFit.tight, child: Text("這是一個(gè)項(xiàng)目" * 6,maxLines: 1,overflow: TextOverflow.ellipsis,))), _buildContainer(Colors.blue, Expanded( child: Text("這是一個(gè)項(xiàng)目" * 6,maxLines: 1,overflow: TextOverflow.ellipsis,))), ],), ); } Container _buildContainer(Color color,Widget child) { return Container( height: 56, color: color, child: Row( children: [ const SizedBox(width:16), const Text("來(lái)源:"), child, const SizedBox(width: 8), Container( padding: EdgeInsets.all(5), decoration: const BoxDecoration( color: Colors.cyan, borderRadius: BorderRadius.all(Radius.circular(6)) ), child: Text("項(xiàng)目"), ), const SizedBox(width:16), ], ), ); } } class Debouncer { final Duration delay; Completer? _lastCompleter; Timer? _timer; Debouncer({required this.delay}); void run(Function action) { // 如果之前的操作還沒(méi)有完成,取消它 if (_lastCompleter != null && !_lastCompleter!.isCompleted) { _lastCompleter!.completeError('Cancelled'); } _lastCompleter = Completer(); // 重置計(jì)時(shí)器 _timer?.cancel(); _timer = Timer(delay, () { action(); _lastCompleter!.complete(); }); // 處理取消操作 _lastCompleter!.future.catchError((error) { print('操作被取消'); }); } }
打印如下:
在這個(gè)示例中:
Debouncer
類(lèi)包含了防抖邏輯。run
方法接受一個(gè)要執(zhí)行的動(dòng)作,并且確保在連續(xù)調(diào)用時(shí),只有最后一次調(diào)用會(huì)在指定的延遲后執(zhí)行。- 當(dāng)
run
方法被連續(xù)調(diào)用時(shí),它會(huì)通過(guò)Completer
取消前一個(gè)還未完成的動(dòng)作,并重新開(kāi)始計(jì)時(shí)。 - 只有在延遲時(shí)間過(guò)去且沒(méi)有新的調(diào)用時(shí),最后一次動(dòng)作才會(huì)執(zhí)行。
這種方法可以有效地限制事件(如用戶(hù)輸入、按鈕點(diǎn)擊等)的處理頻率,從而優(yōu)化性能和資源利用。在實(shí)際應(yīng)用中,大家可能需要根據(jù)具體情況調(diào)整延遲時(shí)間和處理邏輯。
到此這篇關(guān)于詳解Flutter如何使用Completer實(shí)現(xiàn)防抖功能的文章就介紹到這了,更多相關(guān)Flutter Completer防抖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android使用Rotate3dAnimation實(shí)現(xiàn)3D旋轉(zhuǎn)動(dòng)畫(huà)效果的實(shí)例代碼
利用Android的ApiDemos的Rotate3dAnimation實(shí)現(xiàn)了個(gè)圖片3D旋轉(zhuǎn)的動(dòng)畫(huà),圍繞Y軸進(jìn)行旋轉(zhuǎn),還可以實(shí)現(xiàn)Z軸的縮放。點(diǎn)擊開(kāi)始按鈕開(kāi)始旋轉(zhuǎn),點(diǎn)擊結(jié)束按鈕停止旋轉(zhuǎn)。2018-05-05Android用 Mob 實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼實(shí)例
這篇文章主要介紹了Android用 Mob 實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06android多媒體音樂(lè)(MediaPlayer)播放器制作代碼
這篇文章主要為大家詳細(xì)介紹了android多媒體音樂(lè)(MediaPlayer)播放器的制作相關(guān)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02Android ViewPager向?qū)ы?yè)面制作方法
這篇文章主要為大家詳細(xì)介紹了Android ViewPager向?qū)ы?yè)面制作方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11基于android實(shí)現(xiàn)五子棋開(kāi)發(fā)
這篇文章主要為大家詳細(xì)介紹了基于android實(shí)現(xiàn)五子棋開(kāi)發(fā),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02簡(jiǎn)單掌握Android Widget桌面小部件的創(chuàng)建步驟
這篇文章主要介紹了簡(jiǎn)單掌握Android Widget桌面小部件的創(chuàng)建步驟,Widget一般采用web前端技術(shù)進(jìn)行開(kāi)發(fā),需要的朋友可以參考下2016-03-03