分类:
- LinearProgressIndicator 横线进度条
- CircleProgressIndicatorTest 圆形进度条
构造方法
const LinearProgressIndicator({
Key key,
double value,// 当前进度值
Color backgroundColor,// 背景色
Animation<Color> valueColor,// 进度色,通常是AlwaysStoppedAnimation(Colors.red[300])来指定
String semanticsLabel,
String semanticsValue,
})
const CircularProgressIndicator({
Key key,
double value,
Color backgroundColor,
Animation<Color> valueColor,
this.strokeWidth = 4.0,//宽度
String semanticsLabel,
String semanticsValue,
})
示例
代码
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("LinearProgressIndicator"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
LinearProgressIndicator(),
Container(height: 20,),
LinearProgressIndicator(
value: 0.15,
backgroundColor: Colors.orange[200],
),
Container(height: 20,),
LinearProgressIndicator(
backgroundColor: Colors.orange[200],
valueColor: AlwaysStoppedAnimation(Colors.red[300]),
),
Container(height: 20,),
CircularProgressIndicator(),
Container(height: 20,),
CircularProgressIndicator(
backgroundColor: Colors.green[200],
valueColor: AlwaysStoppedAnimation(Colors.red[300]),
),
],
),
),
);
}
}
关键点:
- LinearProgressIndicator(),不指定value时,自动走进度
- 指定value时,0-1.0之间
- 可以改变背景色和进度色