Flutter 实现延时按钮

在实际的开发当中经常会遇到按钮防止疯狂点击的需求,这也是测试同学要测试的一个用例,所以就针对性的封装了一个按钮Widget在工作中使用,感觉还不错,特此分享,不喜勿喷.
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class DelayButton extends StatelessWidget {
  /// 按钮宽度
  final double width;

  /// 按钮高度
  final double height;

  /// 子视图
  final Widget mainWidget;

  /// 事件
  final VoidCallback onTap;

  /// 外形修饰
  final BoxDecoration? decoration;

  /// 外边距
  final EdgeInsetsGeometry? margin;

  /// 内边距
  final EdgeInsetsGeometry? padding;

  /// 排列方式
  final Alignment? alignment;

  /// 延时时间 单位秒 默认两秒
  final int? clickSpaceTime;

  const DelayButton(
      {Key? key,
      required this.width,
      required this.height,
      required this.onTap,
      this.decoration,
      this.margin,
      this.padding,
      required this.mainWidget,
      this.alignment,
      this.clickSpaceTime})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    bool bCanPress = true;
    int time = 0;
    if (clickSpaceTime == null) {
      time = 2000;
    } else {
      time = (clickSpaceTime ?? 0) * 1000;
    }
    return InkWell(
      highlightColor: Colors.transparent,
      splashColor: Colors.transparent,
      child: Container(
        alignment: alignment,
        margin: margin,
        padding: padding,
        width: width,
        height: height,
        decoration: decoration,
        child: mainWidget,
      ),
      onTap: () {
        /// 避免重复响应
        if (bCanPress) {
          bCanPress = false;
          onTap();
          Future.delayed(Duration(milliseconds: time), () {
            bCanPress = true;
          });
        } else {
          if (kDebugMode) {
            print('按钮重复点击');
          }
        }
      },
    );
  }
}

代码已经贴上,直接在项目中使用即可.

你可能感兴趣的:(Flutter 实现延时按钮)