dart - 基于hold的圆形进度按钮(flutter)

Question

我正在尝试制作一个按钮，当用户按住它时，会有一个进度，但如果用户在完成之前松开按钮，进度将会减少。像图片上的东西

Answer 1

正如 Arnold Parge 所说，您可以使用 GestureDetector并收听 onTapDown 和 onTapUp。要创建所需的 LoadingButton，您可以使用以下 Widget 结构:

- GetureDetector
  - Stack
    - CircularProgressIndicator // background circle
    - CircularProgressIndicator // foreground circle
    - Icon

要创建动画，您可以添加 AnimationController并将前景 CircularProgressIndicator 的值绑定(bind)到 AnimationController.value。现在您只需将两个监听器添加到 GestureDetector:

• onTapDown:点击按钮时，动画应该开始。因此我们调用 AnimationController.forward()
• onTapUp:当释放按下时，我们要检查动画是否已经完成。我们可以使用 AnimationController.status检查状态。如果它是 AnimationStatus.forward 它仍在运行。因此，我们希望通过调用 AnimationController.reverse() 来反转动画。

这是生成的按钮:

以及完整源代码:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(),
      home: Scaffold(
        body: Center(child: LoadingButton()),
      ),
    );
  }
}

class LoadingButton extends StatefulWidget {
  @override
  LoadingButtonState createState() => LoadingButtonState();
}

class LoadingButtonState extends State<LoadingButton>
    with SingleTickerProviderStateMixin {
  AnimationController controller;

  @override
  void initState() {
    super.initState();

    controller =
        AnimationController(vsync: this, duration: Duration(seconds: 1));
    controller.addListener(() {
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (_) => controller.forward(),
      onTapUp: (_) {
        if (controller.status == AnimationStatus.forward) {
          controller.reverse();
        }
      },
      child: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          CircularProgressIndicator(
            value: 1.0,
            valueColor: AlwaysStoppedAnimation<Color>(Colors.grey),
          ),
          CircularProgressIndicator(
            value: controller.value,
            valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
          ),
          Icon(Icons.add)
        ],
      ),
    );
  }
}