当前位置: 首页 > article >正文

flutter的debounce_throttle插件使用

debounce_throttle: ^2.0.0

使用:

// ignore_for_file: avoid_print

import 'package:flutter/material.dart';
import 'package:debounce_throttle/debounce_throttle.dart';

void main() {
  runApp(const MaterialApp(
    home: DemoPage(),
  ));
}

class DemoPage extends StatefulWidget {
  const DemoPage({super.key});

  @override
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  // 输入框的防抖
  final _searchController = TextEditingController();
  final _searchDebouncer =
      Debouncer(const Duration(milliseconds: 1000), initialValue: "");

  // 监听按钮的防抖
  final _clickController = MaterialStatesController();
  final _clickDebouncer =
      Debouncer(const Duration(milliseconds: 1000), initialValue: "");

  // 普通函数的防抖
  final _anyDebouncer =
      Debouncer(const Duration(milliseconds: 1000), initialValue: "");

  void anyFn() {
    print("anyFn触发");
    _anyDebouncer.notify("随便什么值");
  }

  @override
  void initState() {
    super.initState();
    // 输入框的防抖
    _searchDebouncer.values.listen((search) => fn1(search));
    _searchController.addListener(() {
      print("输入框改变了值:${_searchController.text}");
      _searchDebouncer.value = _searchController.text;
    });

    // 监听按钮的防抖
    _clickDebouncer.values.listen((_) => fn2());
    _clickController.addListener(() {
      // 只有当按钮pressed时,才触发防抖,而非hover等
      if (_clickController.value.contains(MaterialState.pressed)) {
        print("点击了按钮");
        _clickDebouncer.notify("随便什么值");
      }
    });

    // 某个函数的防抖
    _anyDebouncer.values.listen((_) => fn3());
  }

  @override
  void dispose() {
    _searchDebouncer.cancel();
    _clickDebouncer.cancel();
    _anyDebouncer.cancel();
    _searchController.dispose();
    _clickController.dispose();
    super.dispose();
  }

  void fn1(String query) {
    print("输入框防抖函数触发:调用接口等。。。");
  }

  void fn2() {
    print("按钮防抖函数触发:调用接口等。。。");
  }

  void fn3() {
    print("any函数触发:调用接口等。。。");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('防抖案例'),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(10),
            child: TextField(
              controller: _searchController,
            ),
          ),
          ElevatedButton(
              statesController: _clickController,
              onPressed: () {},
              child: const Icon(Icons.access_time_filled_rounded)),
          ElevatedButton(
              onPressed: anyFn, child: const Icon(Icons.access_alarm)),
        ],
      ),
    );
  }
}


http://www.kler.cn/a/578044.html

相关文章:

  • 进程、线程、锁面试前复习(尽力局)
  • Myslq表的内外连接
  • Python项目-基于Django的在线教育平台开发
  • 【音视频】ffplay简单过滤器
  • 【算法】010、合并两个有序链表
  • 使用 display: flex 实现动态布局:每行两个 item,单数时最后一个占满整行
  • Redis数据结构——list
  • nacos和Eureka的学习
  • Core Speech Kit(基础语音服务)
  • ICRA顶会 | 当无人机遇上扩散模型:如何让四旋翼飞行器在复杂环境中「稳如泰山」?
  • 重塑用户体验:用户界面设计、交互设计及视觉体验优化的融合策略
  • 【C语言】外围电路异常排查方式
  • Python刷题:Python基础
  • 蓝桥-反倍数-oj152
  • 3.6c语言
  • 导电陶瓷粉:掺铑(Rh)钛酸钡在MLCC内电极浆料中的应用与创新-京煌科技
  • Spring Cloud Alibaba OpenFeign 实战:打造稳定高效的远程调用
  • MySql的安装及数据库的基本操作命令
  • 物联网-智慧农业中与市场需求对接的一体化解决方案
  • JS如何实现全选以及联动效果