Monitor UI 文档

为了便于快速开发构建跨平台 APP，我们决定使用 Flutter 进行项目构建。Flutter 是一个支持 Web、IOS、Andriod、Windows Desktop 的跨平台 GUI 框架。您可以在这里查看官方教程：https://flutter.cn/docs/reference/tutorials 。

环境搭建

建议使用 IDEA（配合 Flutter 插件）或者 Vscode 作为 IDE 进行开发。 以 IDEA 为例，你可以在 "File"-"Settings"-"Plugins" 搜索 "Flutter" 插件，进行安装。

developer_mode.png

随后，你可以在 "File"-"Settings"-"Languages & Frameworks"-"Flutter" 进行配置，主要是指定 Flutter SDK 的位置（请先前往官网进行下载，版本不要太高，我们选用的版本是 flutter 3.7.3）。

developer_mode.png

你也可以直接搜索 flutter 找到上面的界面。

可以通过：

flutter pub get

下载项目依赖，当然你也可以使用 IDEA 中的按键来进行依赖安装： pub_get.png

Flutter 是 GUI 框架，所以需要指定相应的平台。例如前两者都是 web，即浏览器应用， 你可以选择你常用的浏览器，例如 Chrome 进行开发。

run_flutter.png

如果你在使用 Windows 进行开发，在运行的时候将会在你的电脑安装一个应用，为了支持这一点， 以 Win11 系统为例，请你打开开发者模式： 请打开“设置”，搜索“开发者选项”，随后进入选项界面，打开“开发人员模式”以允许 Flutter 安装应用。

developer_mode.png

如果你要连接你的手机进行调试，Flutter 也会在你的手机上安装一个 APP，所以你也要打开 USB 调试模式， 允许下载 APP。

项目结构

lib                # 核心代码，所有 Flutter 代码都在这
    - components   # UI 组件
    - model        # 各种 api 调用的模型
    - page         # 页面（如主页，设置页）
    - utils        # 一些辅助工具/函数
    api.dart       # 与后端交互的相关代码
    config.dart    # 配置相关的代码
    constants.dart # 一些常数
    main.dart      # APP 启动的相关代码，是程序的入口
andriod            # Andriod 平台打包所需的代码（无需修改）
ios                # IOS 平台打包所需的代码（无需修改）
linux              # Linux 平台打包所需的代码（无需修改）
windows            # Windows 平台打包所需的代码（无需修改）
web                # Web 平台打包所需的代码（无需修改）
pubspec.yaml       # 依赖管理配置
pubspec.lock       # 依赖版本控制，Flutter 会自己维护更新，请勿自行修改！！！

如果你需要修改 APP 相关的代码，只需要对 lib 中的文件进行修改即可。 当然，如果你需要添加新的第三方库，请按照 Flutter 官方文档的说明， 对 pubspec.yaml 文件进行修改，即在 dependencies 下添加新的第三方包。

model 里的各种模型是根据后端返回的 json 自动生成的，你可以使用这个在线工具：https://app.quicktype.io/ 。

打包应用

上述的方式都是使用 Debug 模式，如果你希望使用 Release 模式并且进行应用打包，请在 monitor/README.md 中查看相应平台的打包方案。