「这是我参与2022首次更文挑战的第12天，活动详情查看：2022首次更文挑战」。
本文翻译自pub: percent_indicator | Flutter Package (flutter-io.cn)
译时版本： percent_indicator 4.0.0
# Percent Indicator (百分比指示器)
环形和条形百分比指示器
特性
- 环形百分比指示器
- 条形百分比指示器
- 切换动画
- 自定义动画时长
- 基于百分经值的进度
- 进度条色和背景色
- 自定义大小
- 用于条形百分比指示器的左子组件、右子组件、中心子组件
- 用于环形指示器的顶部子组件、底部子组件、中心子组件
- 进度条梯度色
开始
要确保在 Flutter 工程中添加其作为依赖。
dependencies:
percent_indicator: ^3.4.0
之后运行 flutter packages upgrade 或在 IntelliJ 中更新包。
示例工程
example 文件夹下有一个示例工程。检出这个工程或者继续阅读以运行。
用法
需要在用到它的 Dart 文件中添加包的导入，使用下面的代码：
import 'package:percent_indicator/percent_indicator.dart';
环形百分比指示器
基础组件
new CircularPercentIndicator(
radius: 60.0,
lineWidth: 5.0,
percent: 1.0,
center: new Text("100%"),
progressColor: Colors.green,
)
完整示例
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text("Circular Percent Indicators"),
),
body: Center(
child: ListView(
children: <Widget>[
new CircularPercentIndicator(
radius: 100.0,
lineWidth: 10.0,
percent: 0.8,
header: new Text("Icon header"),
center: new Icon(
Icons.person_pin,
size: 50.0,
color: Colors.blue,
),
backgroundColor: Colors.grey,
progressColor: Colors.blue,
),
new CircularPercentIndicator(
radius: 130.0,
animation: true,
animationDuration: 1200,
lineWidth: 15.0,
percent: 0.4,
center: new Text(
"40 hours",
style:
new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
),
circularStrokeCap: CircularStrokeCap.butt,
backgroundColor: Colors.yellow,
progressColor: Colors.red,
),
new CircularPercentIndicator(
radius: 120.0,
lineWidth: 13.0,
animation: true,
percent: 0.7,
center: new Text(
"70.0%",
style:
new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
),
footer: new Text(
"Sales this week",
style:
new TextStyle(fontWeight: FontWeight.bold, fontSize: 17.0),
),
circularStrokeCap: CircularStrokeCap.round,
progressColor: Colors.purple,
),
Padding(
padding: EdgeInsets.all(15.0),
child: new CircularPercentIndicator(
radius: 60.0,
lineWidth: 5.0,
percent: 1.0,
center: new Text("100%"),
progressColor: Colors.green,
),
),
Container(
padding: EdgeInsets.all(15.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new CircularPercentIndicator(
radius: 45.0,
lineWidth: 4.0,
percent: 0.10,
center: new Text("10%"),
progressColor: Colors.red,
),
new Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0),
),
new CircularPercentIndicator(
radius: 45.0,
lineWidth: 4.0,
percent: 0.30,
center: new Text("30%"),
progressColor: Colors.orange,
),
new Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0),
),
new CircularPercentIndicator(
radius: 45.0,
lineWidth: 4.0,
percent: 0.60,
center: new Text("60%"),
progressColor: Colors.yellow,
),
new Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0),
),
new CircularPercentIndicator(
radius: 45.0,
lineWidth: 4.0,
percent: 0.90,
center: new Text("90%"),
progressColor: Colors.green,
)
],
),
)
]),
),
);
}
条形百分比指示器
基础组件
new LinearPercentIndicator(
width: 140.0,
lineHeight: 14.0,
percent: 0.5,
backgroundColor: Colors.grey,
progressColor: Colors.blue,
),
完整示例
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text("Linear Percent Indicators"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(15.0),
child: new LinearPercentIndicator(
width: 140.0,
lineHeight: 14.0,
percent: 0.5,
center: Text(
"50.0%",
style: new TextStyle(fontSize: 12.0),
),
trailing: Icon(Icons.mood),
linearStrokeCap: LinearStrokeCap.roundAll,
backgroundColor: Colors.grey,
progressColor: Colors.blue,
),
),
Padding(
padding: EdgeInsets.all(15.0),
child: new LinearPercentIndicator(
width: 170.0,
animation: true,
animationDuration: 1000,
lineHeight: 20.0,
leading: new Text("left content"),
trailing: new Text("right content"),
percent: 0.2,
center: Text("20.0%"),
linearStrokeCap: LinearStrokeCap.butt,
progressColor: Colors.red,
),
),
Padding(
padding: EdgeInsets.all(15.0),
child: new LinearPercentIndicator(
width: MediaQuery.of(context).size.width - 50,
animation: true,
lineHeight: 20.0,
animationDuration: 2000,
percent: 0.9,
center: Text("90.0%"),
linearStrokeCap: LinearStrokeCap.roundAll,
progressColor: Colors.greenAccent,
),
),
Padding(
padding: EdgeInsets.all(15.0),
child: new LinearPercentIndicator(
width: MediaQuery.of(context).size.width - 50,
animation: true,
lineHeight: 20.0,
animationDuration: 2500,
percent: 0.8,
center: Text("80.0%"),
linearStrokeCap: LinearStrokeCap.roundAll,
progressColor: Colors.green,
),
),
Padding(
padding: EdgeInsets.all(15.0),
child: Column(
children: <Widget>[
new LinearPercentIndicator(
width: 100.0,
lineHeight: 8.0,
percent: 0.2,
progressColor: Colors.red,
),
new LinearPercentIndicator(
width: 100.0,
lineHeight: 8.0,
percent: 0.5,
progressColor: Colors.orange,
),
new LinearPercentIndicator(
width: 100.0,
lineHeight: 8.0,
percent: 0.9,
progressColor: Colors.blue,
)
],
),
),
],
),
),
);
}
你可以在 twitter @diegoveloper 上关注我。
