Flutter权限请求与反馈插件bouncer的使用

Flutter权限请求与反馈插件bouncer的使用

问题陈述

当用户操作导致对某些慢速资源发起多个并发请求时，可能会出现两个问题：

1. 资源耗尽
2. 响应以随机顺序到达

该库旨在解决这两个问题。

请参阅示例以供参考。

使用方法

代替以下代码：

var response = await _longRunningRequest(parameters);
_responseHandler(response);

我们可以进行防抖处理：

_debounceSubscription = TimerBouncer(Duration(milliseconds: 200)).debounce(
  request: () => _longRunningRequest(parameters),
  responseHandler: _responseHandler,
  oldSubscription: _debounceSubscription,
);

不要忘记在不再使用时取消 _debounceSubscription：

[@override](/user/override)
dispose() {
  _debounceSubscription?.cancel();
  super.dispose();
}

完整示例Demo

以下是一个完整的Flutter应用程序示例，展示了如何使用 bouncer 插件：

import 'dart:math';

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

void main() {
  runApp(
    MaterialApp(
      title: 'Bouncer 示例',
      home: MyHomePage(),
    ),
  );
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _result = '尚无结果';
  bool _bouncerIsOn = false;
  Subscription? _debounceSubscription;

  // 根据上下文获取配置好的bouncer
  // 默认情况下不使用bouncer，适用于测试等场景
  Bouncer _bouncer(BuildContext context) {
    if (_bouncerIsOn) {
      return TimerBouncer(Duration(milliseconds: 200));
    } else {
      return NoBouncer();
    }
  }

  void _searchTextChanged(BuildContext context, String search) {
    // NoBouncer 实际上与直接调用以下代码相同
    // _responseHandler(await _longRunningRequest(search))
    _debounceSubscription = _bouncer(context).debounce(
      request: () => _longRunningRequest(search),
      responseHandler: _responseHandler,
      oldSubscription: _debounceSubscription!,
    );
  }

  // 模拟请求执行时间取决于搜索字符串的长度
  Future<String> _longRunningRequest(String search) {
    var rand = Random();
    return Future.delayed(
      Duration(seconds: rand.nextInt(2)),
      () => search.toUpperCase(),
    );
  }

  void _responseHandler(String result) {
    setState(() {
      _result = result;
    });
  }

  void _toggleBouncer(bool value) {
    setState(() {
      _bouncerIsOn = value;
    });
  }

  /// 取消订阅，避免调用setState
  [@override](/user/override)
  dispose() {
    _debounceSubscription?.cancel();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bouncer 示例'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          ListTile(
            title: Text('启用防抖'),
            leading: Switch(
              value: _bouncerIsOn,
              onChanged: _toggleBouncer,
            ),
          ),
          TextField(
            decoration: InputDecoration(
              hintText: '输入搜索词',
              contentPadding: EdgeInsets.symmetric(horizontal: 16),
            ),
            onChanged: (value) => _searchTextChanged(context, value),
          ),
          ListTile(title: Text('结果: $_result'))
        ],
      ),
    );
  }
}