Tonal – UI编码挑战

现代UI工程的核心是组件。当我们构建可重用的组件时，就能在整个应用程序和公司中实现更快的迭代和更高的_一致性_。

已完成的作业——MetricsWidget预览

要求

此项目是编码一个小的“metrics”小部件，我们可以在不同视图中重用它。此小部件显示体重和标签。例如，它可以用于力量评估的摘要视图。

此小部件应使用Flutter构建。小部件由以下部分组成：

• 标签，字符串（例如：“上半身”或“核心”）
• 体重，整数（0到350之间）
• 单位（始终为“lbs”）
• 带有图表的背景圆

设计示例

关于字体，标签是Helvetica。体重和单位是League Gothic。

在交付此小部件时，请构建一个屏幕来演示其用法。此屏幕还应包含一个表单，允许用户修改标签和体重，以便在更改表单时查看小部件的更新。

包含的资源

• design.jpg：由团队中的设计师提供的设计。此设计中有三个小部件的示例。
• graph.svg：背景图表的SVG。设计中显示了不同的图表，但对于此练习，您可以将此SVG用于所有小部件实例。您可以使用flutter_svg包在Flutter中显示SVG：https://pub.dartlang.org/packages/flutter_svg
• styles.dart：一些入门样式，从原始设计导出。

评估

我们将重点评估几个方面：

• 代码组织。小部件应与演示屏幕分离。项目应易于导航。
• 代码质量。代码应易于理解，并在必要时进行注释。小部件的编写应考虑到它将在许多不同的地方使用，并且将来需要其他功能。
• 注重细节。此小部件由我们的设计团队创建，因此他们会关注其设计是否与最终产品匹配。产品团队将关注需求是否按书面要求实现。

GitHub

查看 Github