Question

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

Answer 1

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

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

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

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

这是结果按钮：

AnimationController.status

以及完整源代码：

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

Answer 2

使用GestureDetector。

在进度onTapDown中开始进度，并在进度onTapUp中撤消进度，如果进度未完成或您的条件如何。

基于保持的循环进度按钮（颤振）

2 个答案: