Unoffcial Flutter implementation of the progress bar defined in GitHub Primer Design System
安装
将此包添加到您的pubspec.yaml。
dependencies:
primer_progress_bar: ^0.2.0
或者，您可以使用flutter命令，例如
flutter pub add primer_progress_bar
入门
使用Segment定义要在进度条中显示的段
List<Segment> segments = [
Segment(value: 80, color: Colors.purple, label: Text("Done")),
Segment(value: 14, color: Colors.deepOrange, label: Text("In progress")),
Segment(value: 6, color: Colors.green, label: Text("Open")),
];
然后，在您的build方法中
Widget build(BuildContext context) {
final progressBar = PrimerProgressBar(segments: segments);
return Scaffold(
body: Center(
child: Padding(
padding: EdgeInsets.all(20),
child: progressBar,
),
),
);
}
最后，您将得到一个漂亮的进度条？
用法
组件
Primer的进度条由3个组件组成：分段条、图例和图例项。进度条可以在水平条中显示多个彩色段，图例放置在条下方，并附有每个段的对齐描述。
您可以使用Segment定义一个段
Segment(color: Colors.lightBlue, value: 24,
label: Text("Dart"), valueLabel: Text("24%"));
value描述了段在整个条中占据的空间（请参阅段大小的比例部分），而label和valueLabel是图例中用于解释段含义的文本。
PrimerProgressBar集成了这3个组件，并提供了一个简单的界面来创建像上面那样的图表，因此它应该适合一般用例。但是，由于每个组件都可以单独调整，因此很容易将它们单独用于您自己的目的。有关每个组件的更多详细用法，请参阅SegmentedBar、SegmentedBarLegend、LegendItem。
段大小的比例
每个段大小相对于条长度的比例是通过根据段的value除以maxTotalValue来确定的。例如，如果您想显示项目中每种编程语言的使用百分比，那么value可以是该语言的百分比，而maxTotalValue是100。
PrimerProgressBar(segments: segments, maxTotalValue: 100);
然后，例如，一个value为24的段的大小应该是条长度的24%。
如果未指定maxTotalValue，则其被隐式设置为段value的总和，导致段始终填充整个条。
限制图例行数
默认情况下，图例会尝试在垂直方向上对齐所有项。如果图例中的项相对较少，这是可以的，但如果您有大量段，您将得到一个冗长的图例。
对于这些情况，图例提供了一种限制项对齐行数的方法。以下示例将图例中的行数限制为2。
PrimerProgressBar(
segments: segments,
// Limits the number of the lines in the legend to 2.
legendStyle: const SegmentedBarLegendStyle(maxLines: 2),
// A builder of a legend item that represent the overflowed items.
// `truncatedItemCount` is the number of items that is overflowed.
ellipsisBuilder: (truncatedItemCount) {
final value = segments
.skip(segments.length - truncatedItemCount)
.fold(0, (accValue, segment) => accValue + segment.value);
return LegendItem(
segment: Segment(
value: value,
color: Colors.grey,
label: const Text("Other"),
valueLabel: Text("$value%"),
),
);
},
);
如果图例未能将某些项对齐到给定的行数限制内，则不会显示溢出的项，而是将由ellipsisBuilder创建的项（称为省略号）显示为图例中的最后一项。
样式
这3个组件的外观可以分别通过SegmentedBarStyle、SegmentedBarLegendStyle和LegendItemStyle进行配置。文档将提供每个类及其属性的详细描述，而我们的重点是简要解释文档中使用的术语。
分段条
- 间隙：相邻段之间的空间。
- 背景：条本身的颜色。
图例项
- 手柄：一个小的形状，填充了段的颜色，并放置在项的开头。
- 标签：解释段含义的文本。
- 值标签：段的格式化
value。
待办事项
- 添加测试
- 支持鼠标悬停
- 使用Dart3重构
贡献
贡献是开源社区成为学习、启发和创造的精彩场所的原因。您的任何贡献都不胜感激。
如果您有任何可以改进此项目的建议，请 fork 本仓库并创建拉取请求。您也可以直接打开一个带有“enhancement”标签的 issue。别忘了给项目点星！再次感谢！
- Fork 该项目
- 创建您的特性分支（
git checkout -b feature/AmazingFeature） - 提交您的更改（
git commit -m 'Add some AmazingFeature'） - 推送到分支（
git push origin feature/AmazingFeature） - 打开一个拉取请求
感谢
- Best-README-Template @othneildrew
- Primer Design System @github
