flutter的debounce_throttle插件使用

XML 复制代码

debounce_throttle: ^2.0.0

使用：

Dart 复制代码

// 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)),
        ],
      ),
    );
  }
}