Flutter如何实现进度条功能

在Flutter中如何实现一个进度条功能？我需要在应用中展示文件上传或任务完成的进度，希望支持自定义样式（如颜色、高度等），同时能够动态更新进度值。请问有哪些常用的Widget可以实现这个功能（比如LinearProgressIndicator或CircularProgressIndicator），它们各自适用于什么场景？如果要用第三方库，有哪些推荐的选择？最好能提供简单的代码示例说明基本用法。

2 回复

Flutter中可通过LinearProgressIndicator或CircularProgressIndicator实现进度条。LinearProgressIndicator用于线性进度条，CircularProgressIndicator用于圆形进度条。可通过value属性设置进度值，若不设置则显示无限循环动画。

更多关于Flutter如何实现进度条功能的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现进度条功能主要有以下几种方式：

1. LinearProgressIndicator（线性进度条）

LinearProgressIndicator(
  value: 0.7, // 当前进度值（0.0-1.0），null表示不确定进度
  backgroundColor: Colors.grey[300],
  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
)

2. CircularProgressIndicator（圆形进度条）

CircularProgressIndicator(
  value: 0.6,
  backgroundColor: Colors.grey,
  valueColor: AlwaysStoppedAnimation<Color>(Colors.green),
  strokeWidth: 4.0,
)

3. 自定义进度条示例

class CustomProgressBar extends StatelessWidget {
  final double progress;
  
  CustomProgressBar({required this.progress});
  
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 20,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: Colors.grey[300],
      ),
      child: Stack(
        children: [
          LayoutBuilder(
            builder: (context, constraints) {
              return Container(
                width: constraints.maxWidth * progress,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  gradient: LinearGradient(
                    colors: [Colors.blue, Colors.lightBlue],
                  ),
                ),
              );
            },
          ),
          Center(
            child: Text(
              '${(progress * 100).toStringAsFixed(1)}%',
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

4. 实际使用示例

class ProgressExample extends StatefulWidget {
  @override
  _ProgressExampleState createState() => _ProgressExampleState();
}

class _ProgressExampleState extends State<ProgressExample> {
  double _progress = 0.0;
  
  void _startProgress() {
    const period = Duration(milliseconds: 100);
    Timer.periodic(period, (timer) {
      setState(() {
        _progress += 0.01;
        if (_progress >= 1.0) {
          timer.cancel();
          _progress = 1.0;
        }
      });
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        LinearProgressIndicator(value: _progress),
        SizedBox(height: 20),
        CircularProgressIndicator(value: _progress),
        SizedBox(height: 20),
        CustomProgressBar(progress: _progress),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: _startProgress,
          child: Text('开始进度'),
        ),
      ],
    );
  }
}

主要属性说明

  • value: 进度值（0.0-1.0），null表示不确定进度（循环动画）
  • backgroundColor: 背景颜色
  • valueColor: 进度条颜色，可使用动画
  • strokeWidth: 圆形进度条线宽

根据需求选择合适的进度条组件，不确定进度使用无value参数，确定进度设置value值即可。

回到顶部