Question

如何在Flutter中创建类似的内容：

我尝试了以下代码，但绘制时没有动画。

CircularProgressIndicator(
  value: 0.50,
  backgroundColor: Colors.grey,
  valueColor: AlwaysStoppedAnimation(Colors.pink),
)

Answer 1

您可以使用TweenAnimationBuilder之类的ImplicityAnimatedWidget

示例：

这将设置3.5秒钟的动画，进度将从0％开始到100％，您可以在begin:，end:参数中进行调整

TweenAnimationBuilder<double>(
                        tween: Tween<double>(begin: 0.0, end: 1),
                        duration: const Duration(milliseconds: 3500),
                        builder: (context, value, _) =>
                            CircularProgressIndicator(value: value),
                        )

您还可以使用AnimatedBuilder来更好地控制动画

Answer 2

使用确定。确定进度指标在每个时间点都有一个特定的值，该值应从 0.0 单调增加到 1.0，此时指标完成。要创建确定的进度指示器，请使用 0.0 到 1.0 之间的非空值。

此示例显示了一个具有变化值的 CircularProgressIndicator

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget>
    with TickerProviderStateMixin {
  late AnimationController controller;

  @override
  void initState() {
    controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 5),
    )..addListener(() {
      setState(() {});
    });
    controller.repeat(reverse: true);
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Text(
              'Linear progress indicator with a fixed color',
              style: Theme.of(context).textTheme.headline6,
            ),
            CircularProgressIndicator(
              value: controller.value,
              semanticsLabel: 'Linear progress indicator',
            ),
          ],
        ),
      ),
    );
  }
}

如何创建动画确定的圆形进度指示器？

2 个答案: