flutter - 如何在颤动中实现超时按钮

Question

用户可以点击按钮直到计时器结束。我不知道如何开始布局。在这种情况下，flutter sdk 是否有任何内置（或类似要实现的）小部件。

标签： flutterdartbuttontimerprogress-bar

Answer 1

您可以使用小部件轻松实现它CustomPainter。检查下面的源代码并根据您的需要进行调整。

import 'dart:async';

import 'package:flutter/material.dart';

class MyProgressButton extends StatefulWidget {
  @override
  _MyProgressButtonState createState() => _MyProgressButtonState();
}

class _MyProgressButtonState extends State<MyProgressButton> {
  Timer _timer;
  int _progress = 0;
  int _totalActionTimeInSeconds = 3;

  void _initCounter() {
    _timer?.cancel();
    _progress = 0;
    _timer = Timer.periodic(const Duration(milliseconds: 50), (_) {
      setState(() => _progress += 50);

      if (Duration(milliseconds: _progress).inSeconds >= _totalActionTimeInSeconds) {
        _timer.cancel();
        // Do something
      }
    });
  }

  void _stopCounter() {
    _timer?.cancel();
    setState(() => _progress = 0);
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (_) => _initCounter(),
      onTapUp: (_) => _stopCounter(),
      child: CustomPaint(
        painter: _MyCustomButtonPainter((_progress / 1000) / _totalActionTimeInSeconds),
        child: Container(
          alignment: Alignment.center,
          width: 500.0,
          height: 200.0,
          child: Text('Press me'),
        ),
      ),
    );
  }
}

class _MyCustomButtonPainter extends CustomPainter {
  const _MyCustomButtonPainter(this.progress);

  final double progress;

  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()..color = Colors.grey;
    final double buttonWidth = size.width;
    final double buttonHeight = size.height;

    canvas.drawRRect(
      RRect.fromRectAndRadius(
        Rect.fromLTRB(0.0, 0.0, buttonWidth, buttonHeight),
        Radius.circular(5.0),
      ),
      paint,
    );

    paint.color = Colors.green;

    canvas.drawRRect(
      RRect.fromRectAndRadius(
        Rect.fromLTRB(0.0, 0.0, progress * buttonWidth, buttonHeight),
        Radius.circular(5.0),
      ),
      paint,
    );
  }

  @override
  bool shouldRepaint(_MyCustomButtonPainter oldDelegate) => this.progress != oldDelegate.progress;
}