屏幕测试器
- 这是一个示例应用程序。
- 采用MVVM模式
- 尝试通过使用包的概念来鼓励使用边界(通过使用包的概念)
入门 ??
- 下载仓库
- 请确保您处于Flutter稳定版频道(1.22.6)
flutter channel stable
flutter upgrade
- 下载项目后,按提示安装依赖项。
- 运行命令
flutter run
- 此时您应该可以看到应用程序正常运行。
架构 ??
-
该应用程序遵循MVVM方法
-
有一个共享文件夹,其中包含所有通用实体。
-
通用实体,如资产、扩展、服务等
-
以一个文件夹为例,比如home
-
它被细分为组件、模型、utils(任何工具)、视图和视图模型
-
让我们逐一讨论
组件
- 它们包含UI的构建块。
- 一个UI可能包括一个按钮、一个卡片或一个列表。
- 所有这些项目都创建在它们各自的文件夹下
- 例如,对于列表组件,
home/components/list/xyz.component.dart
模型(来自MVVM)
- 它们通常是简单的类
- 例如,我们以home为例
- 它将包含models文件夹,包括home所需的所有模型
home/models/xyz.model.dart
视图(来自MVVM)
- 这些是用户在其设备上看到的屏幕。
- 例如,home会有views文件夹
home/view/xyz.view.dart
- 我们有3个视图
- HomeView。现在home有2个选项(Egestas scleri)和(Consectur)。
- 点击Egestas scleri,您会看到PellenView。
- 点击Consectur,您会看到FringillaView。
模板
-
在某些情况下,一个视图会有一部分UI,这部分UI相当大。
-
我们将这些UI片段提取到模板中。
-
例如,对于home视图,我们有一个模板,
home/templates/carousel/xyz.template.dart
视图模型(来自MVVM)
- 它们有助于将数据转换为模型。
- 例如,home将有view_models文件夹。
home/view_models/xyz.viewmodel.dart
实用工具
- 任何附加的辅助函数或字符串都放在utils中。
- 例如,home将有utils文件夹,包含所有需要的字符串。
home/utils/strings.dart
共享
-
有一个名为shared的文件夹,其中包含应用程序内的所有通用实体。
-
例如,所有样式、颜色都放在styles下。
shared/styles/xyz.dart
- 例如,所有服务都放在services文件夹下。
shared/services/xyz.service.dart
数据
- 示例数据文件放在assets中。
- 在需要时,它们会在应用程序内被获取。
测试 ??
- 使用golden tests
https://pub.dev/packages/golden_toolkit - 集成测试
flutter drive \
--driver=test_driver/integration_test.dart \
--target=integration_test/app_test.dart
flutter drive \
--driver=test_driver/integration_test.dart \
--target=integration_test/app_test.dart
-d "9B4DC39F-5419-4B26-9330-0B72FE14E15E"