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

【问题标题】：How to create a custom circular progress bar in Flutter?如何在 Flutter 中创建自定义的圆形进度条？
【发布时间】：2021-10-18 17:40:43
【问题描述】：

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

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

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

查了很多关于圆形进度条的文章。

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

【问题讨论】：

请提供足够的代码，以便其他人更好地理解或重现问题。

标签： flutter

【解决方案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}',
              ),
            ]
          ],
        ),
      ),
    );
  }
}

【讨论】：

代码运行良好。非常感谢！