屏幕测试器

  • 这是一个示例应用程序。
  • 采用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个视图
  1. HomeView。现在home有2个选项(Egestas scleri)和(Consectur)。
  2. 点击Egestas scleri,您会看到PellenView。
  3. 点击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"