【Flutter】仿 Element 样式 Progress 进度条
先看下整体效果
依赖
在 「pubspec.yaml」 中依赖
ele_progress:^version最新版本号在 「pub」 中查看：「ele_progress」 地址：https://pub.dev/packages/ele_progress
导入
import 'package:ele_progress/ele_progress.dart';
主题
全局设置 「ele_progress」 的样式需要使用 「EleTheme」，代码如下：
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: EleTheme(
data: EleThemeData(),
child: ProgressDemo(),
),
);
}
库中自带一套默认的样式。
属性
「progress」：进度，值的范围：0-100。 「colors」 ：进度条的颜色，这是一个数组类型，设置一个颜色表示纯色，设置多个是渐变色。 「backgroundColor」 ：进度条的背景颜色。 「type」：进度条样式，支持4种，分别为 「line」（直线）、「circle」（圆环）、「dashboard」（仪表盘）、「liquid」（水波纹）。 「strokeWidth」 ：进度条的宽度，默认是6， type=liquid 时不起作用。 「showText」：是否显示进度文字，默认 true 「textInside」 ：进度文字是否显示在进度条内，默认 false，只在 type=line 和 liquid时可用。 「true」：表示跟随进度条移动。 「false」：type=line 而且direction=horizontal，文字显示在进度条右侧，其他情况文字显示在进度条中间。 「format」：自定义显示进度文字。 「textStyle」：进度文字字体样式。 「status」 ：控制进度条颜色，和「theme」配合使用的，主题中有「primary、success、info、warning、danger」 5种状态，对应5种颜色：primaryColor、successColor、infoColor、warningColor、dangerColor。但是此属性会被 「colors」 属性覆盖。 「direction」 ：进度条的方向，type=line和liquid时起作用。 「borderColor」 ：边框颜色，type=liquid时起作用。 「borderWidth」：边框宽度，type=liquid时起作用。 「radius」 ：边框圆角，type=liquid时起作用。
使用
最简单的用
EProgress(progress: 50)
「progress」 表示进度，值的范围：0-100。
进度条支持4种形状，分别为：「line」（直线）、「circle」（圆环）、「dashboard」（仪表盘）、「liquid」（水波纹）。
EProgress(
progress: 50,
type: ProgressType.liquid,
)
「colors」 ：表示进度条的颜色，这是一个数组类型，设置一个颜色表示纯色，设置多个是渐变色。
EProgress(
progress: _animation.value,
strokeWidth: 20,
colors: [
Colors.blue,
Colors.red,
Colors.green,
],
)
「backgroundColor」 ：表示进度条的背景颜色。
EProgress(
progress: 50,
strokeWidth: 20,
backgroundColor: Colors.grey,
)
「strokeWidth」 进度条的宽度，默认是6。
EProgress(
progress: 50,
strokeWidth: 20,
)
「strokeWidth」 在 「type=liquid」（水波纹）样式时不起作用。
涉及进度文字的属性有
「showText」：是否显示，默认 true 「textInside」 ：进度文字是否显示在进度条内，默认 false，只在 type=line 和 liquid时可用。 「true」：表示跟随进度条移动。 「false」：type=line 而且direction=horizontal，文字显示在进度条右侧，其他情况文字显示在进度条中间。 「format」：自定义显示进度文字。 「textStyle」：字体样式。
EProgress(
progress: _animation.value,
strokeWidth: 20,
textInside: true,
)
EProgress(
progress: _animation.value,
strokeWidth: 20,
format: (progress) {
return '自定义：$progress%';
},
textStyle: TextStyle(color: Colors.red),
)
「status」 属性是和「theme」配合使用的，主题中有「primary、success、info、warning、danger」 5种状态，对应5种颜色
此颜色会被 「colors」 覆盖。
EProgress(
progress: 50,
strokeWidth: 20,
status: EleThemeStatus.success,
)
「direction」 表示进度条的方向，type=line和liquid时起作用。
EProgress(
progress: _animation.value,
strokeWidth: 50,
direction: Axis.vertical,
)
「borderColor」 、「borderWidth」、「radius」 是设置边框样式的，type=liquid时起作用。
EProgress(
progress: 50,
type: ProgressType.liquid,
borderColor: Colors.red,
borderWidth: 5,
radius: 30,
)
结束语
这是仿 「Element」 样式组件的第一个，后面还会有很多个，其他组件请点击阅读原文查看。
评论