Flutter Widget 之CircularrogressIndicator and LinearProgressIndicator

你想要显示MaterialApp的任务完成进度或是它正在执行的任务吗？

我们有一些widget可以派上用场！

你可以使用CircularProgressIndicator以圆形进度条显示进度，若你喜欢用线性进度条请使用LinearProgressIndicator。

这些API几乎完全相同。这两种进度指示器都有精确的进度指示和模糊的进度指示。你可以使用精确进度的版本显示app执行任务的实际进度

若你只想显示app正在执行任务任务无法准确估算任务进度，请使用模糊进度的版本

默认情况下，进度指示器将使用主题中accentColor的颜色

你也可以使用valueColor参数设置自定义颜色，该值可以设置为动画，若你想用单一颜色请使用alwaysStoppedAnimation

CircularProgressIndicator(
    valueColor: AlwaysStoppedAnimation<Color>(Colors.green)
);

你可以通过传递彩色动画

void initState() {
    _animationController = AnimationController(...);
    _colorTween = _animationController.drive(ColorTween(
    begin: Colors.yellow,
    end: Colors.blue));
    _animationController.repeat();
    super.initState();
}

Widget build(BuildContext context) => CircularProgressIndicator(valueColor: _colorTween);

使用backgroundColor设置条状或圆形进度条里的背景色，来获得整齐利落的画面效果

LinearProgressIndicator(backgroundColor: Colors.grey,);

针对精确版本的条状或圆形进度条, 请设置value参数以表示当前的进度

CircularProgressIndicator(
    value: _downloadPercentage,
);

试情况而定，你可能需要调用setState或将显示器包装在AnimatedBuilder、StreamBuilder或类似的widget中使用更新至进行rebuild

CircularProgressInicator具有一个独特的参数,也就是strokeWidth,它可以让进度指示器变得更细或是更粗

CircularProgressIndicator(
    strokeWidthL 2,
);

CircularProgressIndicator(
    strokeWidthL 10,
);

如果想了解有关CircularrogressIndicator and LinearProgressIndicator的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址