【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」 样式组件的第一个，后面还会有很多个，其他组件请点击阅读原文查看。