基于保持的循环进度按钮（颤振） [英] Circular progress button based on hold (flutter)

问题描述

我正在尝试创建一个按钮，当用户按住该按钮时会有一个进度，但是如果用户在完成按钮之前未按下按钮，则进度会减少。就像图片上的一样

I'm trying to make a button where when user hold it, there will be a progress, but if the user unpress the button before it finish, the progress will decrease. somthing like the one on the picture

推荐答案

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

As said by Arnold Parge, you can use the GestureDetector and listen to onTapDown and onTapUp. To create your desired LoadingButton, you can use the following Widget Structure:

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

要创建动画，您可以添加 AnimationController 并绑定值 CircularProgressIndicator 到 AnimationController.value 的值。现在，您只需要将两个侦听器添加到 GestureDetector ：

To create the animation, you can add an AnimationController and bind the value of the foreground CircularProgressIndicator to AnimationController.value. Now you'll just have to the add the two listeners to to the GestureDetector:

• onTapDown ：点击该按钮时，动画应开始播放。因此，我们调用 AnimationController.forward（）


• onTapUp ：释放按下，我们要检查动画是否已经完成。我们可以使用 AnimationController.status 来检查状态。如果它是 AnimationStatus.forward ，它仍在运行。因此，我们想通过调用 AnimationController.reverse（）来反转动画。

• onTapDown: When tapping on the button, the animation should start. Therefore we call AnimationController.forward()
• onTapUp: When releasing the press, we want to check if the animation is already finished. We can use AnimationController.status to check the status. If it is AnimationStatus.forward it is still running. Hence we want to reverse the animation with calling AnimationController.reverse().

结果按钮如下：

< img src = https://i.stack.imgur.com/pY4rm.gif alt =按钮动画>

>完整源代码：

And the complete source code:

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

这篇关于基于保持的循环进度按钮（颤振）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！