1. LinearProgressIndicator
LinearProgressIndicator
是ProgressIndicator
的子类。它会创建水平进度条指示器,但是如果将其放置在旋转90度的RotatedBox
中,也可以创建垂直进度条指示器。
LinearProgressIndicator
分为两种类型:
第一种类型:Determinate
确定类型(Determinate):一个进度指示器,根据value
属性的值(在0
和1
的范围内)向用户显示完成的工作百分比。
第二种类型:Indeterminate
不确定类型(Determinate):进度指示器,既不能标识完成的工作百分比,也不能表示结束时间。
LinearProgressIndicator构造函数:
const LinearProgressIndicator(
{Key key,
double value,
Color backgroundColor,
Animation<Color> valueColor,
double minHeight,
String semanticsLabel,
String semanticsValue}
)
2. 示例:Indeterminate
下面从最简单的示例开始,LinearProgressIndicator
模拟活动的流程,但不知道已完成工作的百分比,也不知道何时完成。
示例代码:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'yiibai.com',
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter LinearProgressIndicator Example'),
),
body: Center(
child: LinearProgressIndicator(
backgroundColor: Colors.cyan[100],
valueColor: new AlwaysStoppedAnimation<Color>(Colors.green),
),
),
);
}
}
运行上面示例代码,得到以下结果:
默认情况下,LinearProgressIndicator
的大小很小,但是如果要自定义其大小,那么将其放入SizedBox
中。
SizedBox(
width: 250,
height: 20,
child: LinearProgressIndicator(
backgroundColor: Colors.cyan[100],
valueColor: new AlwaysStoppedAnimation<Color>(Colors.green),
),
)
valueColor
参数用于为LinearProgressIndicator
的进度指定颜色动画,例如:
valueColor: new AlwaysStoppedAnimation<Color>(Colors.red)
如果value
参数是一个特定值而不是null
值,则AlwaysStoppedAnimation <Color>
将始终停止LinearProgressIndicator
的动画。
SizedBox(
width: 250,
height: 20,
child: LinearProgressIndicator(
value: 0.3,
backgroundColor: Colors.cyan[100],
valueColor: new AlwaysStoppedAnimation<Color>(Colors.green),
),
)
运行效果如下 -
根据上述value
和valueColor
参数的特征,可以控制LinearProgressIndicator
的行为,下面来看一个示例:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'yiibai.com',
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _HomePageState();
}
}
class _HomePageState extends State<HomePage> {
bool _working = false;
void startWorking() async {
this.setState(() {
this._working = true;
});
}
void finishWorking() {
this.setState(() {
this._working = false;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter LinearProgressIndicator Example'),
),
body: Center(
child: Column (
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: 250,
height: 20,
child: LinearProgressIndicator(
value: this._working? null: 1,
backgroundColor: Colors.cyan[100],
valueColor: new AlwaysStoppedAnimation<Color>(Colors.green),
),
),
SizedBox(width:10, height:10),
ElevatedButton(
child: Text("Start"),
onPressed: this._working? null: () {
this.startWorking();
}
),
ElevatedButton(
child: Text("Finish"),
onPressed: !this._working? null: () {
this.finishWorking();
}
)
]
)
),
);
}
}
运行上面示例代码,结果如下:
3. 示例:Determinate
以下示例使用LinearProgressIndicator
呈现进度以及完成的工作百分比。value
参数的值从0
到1
的显示效果。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'yiibai.com',
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _HomePageState();
}
}
class _HomePageState extends State<HomePage> {
double _value = 0;
bool _working = false;
void startWorking() async {
this.setState(() {
this._working = true;
this._value = 0;
});
for(int i = 0; i< 10; i++) {
if(!this._working) {
break;
}
await Future.delayed(Duration(seconds: 1));
this.setState(() {
this._value += 0.1;
});
}
this.setState(() {
this._working = false;
});
}
void stopWorking() {
this.setState(() {
this._working = false;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter LinearProgressIndicator Example'),
),
body: Center(
child: Column (
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: 250,
height: 20,
child: LinearProgressIndicator(
value: this._value,
backgroundColor: Colors.cyan[100],
valueColor: new AlwaysStoppedAnimation<Color>(Colors.green),
),
),
SizedBox(width:10, height: 10),
Text(
"Percent: " + (this._value * 100).round().toString()+ "%",
style: TextStyle(fontSize: 20),
),
ElevatedButton(
child: Text("Start"),
onPressed: this._working? null: () {
this.startWorking();
}
),
ElevatedButton(
child: Text("Stop"),
onPressed: !this._working? null: () {
this.stopWorking();
}
)
]
)
),
);
}
}
运行结果如下 -
4. 示例:垂直进度
LinearProgressIndicator
基本上不支持垂直方向。但是,如果需要垂直进度条指示器,可以将其放置在90
度旋转的RotatedBox
中。
示例代码:
RotatedBox(
quarterTurns: -1,
child: SizedBox(
width: 250,
height: 25,
child : LinearProgressIndicator(
backgroundColor: Colors.cyan[100],
valueColor: new AlwaysStoppedAnimation<Color>(Colors.green),
)
)
)
QuarterTurns = 1
表示顺时针旋转90度。quarterTurns = -1
表示逆时针旋转90度。
5. backgroundColor
backgroundColor
用于设置LinearProgressIndicator
的背景色。
Color backgroundColor
6. value
double value
7. valueColor
valueColor
用于为进度指定颜色动画。
Animation<Color> valueColor
类之间的继承关系如下 -
示例代码:
LinearProgressIndicator(
backgroundColor: Colors.cyanAccent,
valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
)
8. minHeight
minHeight
用于设置LinearProgressIndicator
的最小高度。
double minHeight
9. semanticsLabel
semanticsLabel
用于描述LinearProgressIndicator的预期用途,该属性完全隐藏在界面上,并用于屏幕阅读器,例如盲人屏幕阅读器。
String semanticsLabel
10. semanticsValue
semanticsValue
完全隐藏在屏幕上。其目的是为屏幕阅读器提供有关当前进度的信息。
默认情况下,semanticsValue
的值是完成的工作的百分比,例如,value
属性的值是0.3
,这意味着语义值是“30%”。
String semanticsValue
示例
LinearProgressIndicator(
value: this._value,
backgroundColor: Colors.cyanAccent,
valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
semanticsLabel: "Downloading file abc.mp3",
semanticsValue: "Percent " + (this._value * 100).toString() + "%",
)