Flutter组件之圆形进度条（CircularProgressIndicator），编写一个实例

Flutter 的 CircularProgressIndicator 是一个用于显示加载状态或进度百分比的圆形进度条组件。它非常直观，常用于页面初始化或数据加载时提供反馈。下面是一个简单的实例：

import 'package:flutter/material.dart';

class CircularProgressExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CircularProgressIndicator(
        value: 0.8, // 进度值，范围从 0 到 1
        strokeWidth: 5.0, // 圆环的宽度
        backgroundColor: Colors.white, // 背景颜色，默认透明
        color: Colors.blue, // 进度条的颜色
      ),
    );
  }
}

在这个例子中，`CircularProgressIndicator`的 `value` 属性设置了当前的完成进度，`strokeWidth` 控制圆环的厚度，`backgroundColor` 设置了圆环未填充部分的颜色，而 `color` 则指定了进度线的颜色。

如果你想让它动态变化，你可以将 `value` 定义为一个变量，并在需要更新进度时改变这个变量。

相关问题

flutter编写一个可拖动的圆形进度条，举一个实例

在 Flutter 中，我们可以使用 `Draggable` 和 `CircleAvatar` 或者自定义一个带有 `GestureDetector` 的 CustomPaint 组件来创建可拖动的圆形进度条。下面是一个使用 `Draggable` 和 `CircleAvatar` 的简单示例：

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart'; // 导入 CustomPaint

class draggableCircularProgress extends StatefulWidget {
  @override
  _draggableCircularProgressState createState() => _draggableCircularProgressState();
}

class _draggableCircularProgressState extends State<draggableCircularProgress> {
  double progress = 0;
  Offset position;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (DragUpdateDetails details) {
        setState(() {
          position = details.globalPosition;
        });
      },
      child: Draggable(
        feedback: Container(color: Colors.grey.withOpacity(0.2)),
        child: Stack(
          children: [
            CircleAvatar(
              radius: 40,
              color: Colors.blue,
              child: Center(child: Text("$progress%")),
            ),
            Container(
              height: 40,
              width: 40,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.white,
              ),
              child: Center(
                child: Transform.translate(
                  offset: position - Offset.zero,
                  child: Container(
                    width: 40,
                    height: 40,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      border: Border.all(width: 2, color: Colors.black),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个圆形的 `CircleAvatar`，并在其上添加了一个可拖动的小圈作为进度指示。当手指在屏幕上移动时，`onPanUpdate` 函数会被触发，更新 `position`，进而带动小圈的位置变化，模拟进度条的滑动。

Flutter圆形进度条

Flutter中的圆形进度条可以使用CircularProgressIndicator widget来实现。下面是一个简单的例子：

class MyCircularProgress extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CircularProgressIndicator(),
    );
  }
}

在上面的例子中，我们创建了一个名为MyCircularProgress的无状态小部件，并在中心放置了一个CircularProgressIndicator小部件。您可以将CircularProgressIndicator放置在您的应用程序中的任何位置，以显示进度。

您也可以自定义圆形进度条的颜色、大小和线条宽度等属性。例如，要更改进度条的颜色，可以使用valueColor属性：

CircularProgressIndicator(
  valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
)

要更改进度条的大小，可以使用半径属性：

CircularProgressIndicator(
  radius: 30,
)

要更改线条宽度，可以使用strokeWidth属性：

CircularProgressIndicator(
  strokeWidth: 5,
)

以上是一些基本的自定义设置，您可以根据需要进行更多自定义。