如何在 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}',
              ),
            ]
          ],
        ),
      ),
    );
  }
}