詳解Flutter如何使用Completer實(shí)現(xiàn)防抖功能
在Flutter
中,Completer
可以用來實(shí)現(xiàn)防抖功能。防抖是用于確保時間內(nèi)的所有觸發(fā)被合并成單一請求。對于連續(xù)的事件觸發(fā)(如用戶的鍵盤輸入、按鈕的連續(xù)點(diǎn)擊),只有在指定的延遲時間內(nèi)沒有再次觸發(fā)事件時,才執(zhí)行實(shí)際的操作。
下面是如何使用 Completer
來實(shí)現(xiàn)異步防抖的一個示例,代碼如下:
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("這是一個項目",maxLines: 1,overflow: TextOverflow.ellipsis,))), _buildContainer(Colors.red, const Flexible( fit: FlexFit.tight, child: Text("這是一個項目",maxLines: 1,overflow: TextOverflow.ellipsis,))), _buildContainer(Colors.purple, Flexible( fit: FlexFit.tight, child: Text("這是一個項目" * 6,maxLines: 1,overflow: TextOverflow.ellipsis,))), _buildContainer(Colors.blue, Expanded( child: Text("這是一個項目" * 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("來源:"), child, const SizedBox(width: 8), Container( padding: EdgeInsets.all(5), decoration: const BoxDecoration( color: Colors.cyan, borderRadius: BorderRadius.all(Radius.circular(6)) ), child: Text("項目"), ), const SizedBox(width:16), ], ), ); } } class Debouncer { final Duration delay; Completer? _lastCompleter; Timer? _timer; Debouncer({required this.delay}); void run(Function action) { // 如果之前的操作還沒有完成,取消它 if (_lastCompleter != null && !_lastCompleter!.isCompleted) { _lastCompleter!.completeError('Cancelled'); } _lastCompleter = Completer(); // 重置計時器 _timer?.cancel(); _timer = Timer(delay, () { action(); _lastCompleter!.complete(); }); // 處理取消操作 _lastCompleter!.future.catchError((error) { print('操作被取消'); }); } }
打印如下:
在這個示例中:
Debouncer
類包含了防抖邏輯。run
方法接受一個要執(zhí)行的動作,并且確保在連續(xù)調(diào)用時,只有最后一次調(diào)用會在指定的延遲后執(zhí)行。- 當(dāng)
run
方法被連續(xù)調(diào)用時,它會通過Completer
取消前一個還未完成的動作,并重新開始計時。 - 只有在延遲時間過去且沒有新的調(diào)用時,最后一次動作才會執(zhí)行。
這種方法可以有效地限制事件(如用戶輸入、按鈕點(diǎn)擊等)的處理頻率,從而優(yōu)化性能和資源利用。在實(shí)際應(yīng)用中,大家可能需要根據(jù)具體情況調(diào)整延遲時間和處理邏輯。
到此這篇關(guān)于詳解Flutter如何使用Completer實(shí)現(xiàn)防抖功能的文章就介紹到這了,更多相關(guān)Flutter Completer防抖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android使用Rotate3dAnimation實(shí)現(xiàn)3D旋轉(zhuǎn)動畫效果的實(shí)例代碼
利用Android的ApiDemos的Rotate3dAnimation實(shí)現(xiàn)了個圖片3D旋轉(zhuǎn)的動畫,圍繞Y軸進(jìn)行旋轉(zhuǎn),還可以實(shí)現(xiàn)Z軸的縮放。點(diǎn)擊開始按鈕開始旋轉(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í)例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06android多媒體音樂(MediaPlayer)播放器制作代碼
這篇文章主要為大家詳細(xì)介紹了android多媒體音樂(MediaPlayer)播放器的制作相關(guān)代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02

基于android實(shí)現(xiàn)五子棋開發(fā)

簡單掌握Android Widget桌面小部件的創(chuàng)建步驟