先看下整体效果
依赖
-
在 pubspec.yaml 中依赖
ele_progress:^version 复制代码
最新版本号在 pub 中查看:ele_progress 地址:pub.dev/packages/el…
-
导入
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 样式组件的第一个,后面还会有很多个,其他组件请到我这里查看:laomengit.com/element/ele…。