如何在 Flutter 中创建自定义圆形进度条？

Question

我想制作一个自定义的圆形进度条。 其中，我可以设置一个最大值，如 1200。圆圈的进度根据我输入的值而变化。 如果我输入 100 作为值，它将显示为进度。 如果我再次输入 200，它会将这个值与前一个值相加，例如：200+100=300 并显示进度。

它会做同样的事情，直到达到最大值。 如果它超过最大值，那么它会计算我输入的额外值。

比如，如果我输入 1500，它会显示额外的值 300。

我查了很多关于循环进度条的文章。

但我不明白如何在 Flutter 中做到这一点。

Answer 1

您可以使用 CircularProgressIndicator.adaptive，它使您能够赋予进度“价值”。

您可以提供从 0 到 1 的任何进度值（1 是完整的圆圈），因此可以将您的值作为分数 (progressValue/totalValue) 提供给 value 参数。

例如在你的情况下 100/1200

对于额外的价值，您可以添加一个简单的检查，以确定进度值是否大于您的 totalValue 然后显示它们的差异

这是通过单击按钮将进度值增加 100 并显示额外值（如果有）的代码。

class ExampleScreen extends StatefulWidget {

 const ExampleScreen({Key? key}) : super(key: key);

  @override
  State<ExampleScreen> createState() => _ExampleScreenState();
}

class _ExampleScreenState extends State<ExampleScreen> {
  int totalValue = 1200;
  int loadingValue = 0;

  void onAddButtonPressed() {
    setState(() {
      loadingValue += 100;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: onAddButtonPressed,
        tooltip: 'Add 100',
        child: const Icon(Icons.add),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            CircularProgressIndicator.adaptive(
              value: loadingValue / totalValue,
            ),
            if (loadingValue > totalValue) ...[
              const SizedBox(
                height: 10,
              ),
              Text(
                'your extra values are ${loadingValue - totalValue}',
              ),
            ]
          ],
        ),
      ),
    );
  }
}