0.1 代码规范代码检查pubspec.yaml 开启 flutter_lints 1234567891011dev_dependencies: flutter_test: sdk: flutter # The "flutter_lints" package below contains a set of recommended lints to # encourage good coding practices. The lint set provided by the package is # activated in the `analysis_options.yaml` file located at the root of your # package. See that file for information about deactivating specific lint # rules and activating additional ones. flutter_lints: ^1.0.0 ... 目录 123456789 ...

0.2 API 接口规范 采用 restful 规范接口设计，设计说明如下 请求 url 示例 操作 URL 说明 post /orders 新增订单 get /orders 订单列表 get /orders/:id 订单详情 put /orders/:id 修改订单 delete /orders/:id 删除订单 返回 json 示例 返回分离列表 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412 ...

0 学习建议学习 Dart 语法https://video.ducafecat.tech/#/course_course_detail?uri=dart-learn 学习 Flutter 基础https://video.ducafecat.tech/#/course_course_detail?uri=flutter-quickstart-learn 学习 GetX 基础入门https://space.bilibili.com/404904528/channel/seriesdetail?sid=771280 用 vscode 打开文档插件 https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced 左侧文档切换，点击 xxx.md 文件，点击右上角按钮，点击 Preview 面板 即可。 视频文档后期都会同步到https://video.ducafecat.tech/ 理解解决问题的目标、方法、思路如为什么要 kv 存储，dio 封装解决了什么问题， ...

10.1 导航栏组件抽取 发现很多界面都用到了这个导航功能，抽取到 lib/common/components 下面 实现步骤： 第 1 步：mainAppBar 组件编写 注意组件内不要用 .w .h 这种动态计算的方式，我们只有在 业务 UI 层调用时才传入，详见代码规范。 lib/common/components/appbar.dart 12345678910111213141516171819202122232425262728293031323334353637383940414243444546import 'package:flutter/material.dart';import '../index.dart';/// 主导航栏AppBar mainAppBarWidget({ Key? key, Function()? onTap, // 点击事件 Widget? leading, // 左侧按钮 String? hintText, // 输入框默认提示文字 Strin ...

1.1 项目初始实现步骤第 1 步: 创建项目 项目名称包名称 woo_commerce.ducafecat.com cli 方式（可选） 1flutter create --org woo_commerce.ducafecat.com flutter_woo_commerce_getx_learn —org 指定包名 第 2 步: 创建 github 代码https://github.com/ 可以选择 private 私有项目 第 3 步: 加入远程仓库进入项目根目录 123456git initgit add .git commit -m "init"git branch -M maingit remote add origin git@github.com:ducafecat/flutter_woo_commerce_getx_learn.gitgit push -u origin main 第 4 步: 安装 sourceTreehttps://www.sourcetreeapp.com/ 拖入你的列表栏内 可视化操作 第 5 步: ...

10.2 商品列表编写效果 这个页面适合大家来练手，先不看文档，自己尝试了写下。 实现步骤： 第 1 步：i18nlib/common/i18n/locale_keys.dart 123// 商品 - 列表static const gFlashSellTitle = "goods_flash_sell_title";static const gNewsTitle = "goods_news_title"; lib/common/i18n/locales/locale_en.dart 123// 商品 - 列表LocaleKeys.gFlashSellTitle: 'Flash Sell',LocaleKeys.gNewsTitle: 'New Product', lib/common/i18n/locales/locale_zh.dart 123// 商品 - 列表LocaleKeys.g ...

1.2 逻辑、页面、数据 分离MVVM 架构 职责： View 视图显示 Controller 控制器，大管家，各种生命周期、数据装备、路由… DataModel 数据模型 ViewModel 负责数据发生变化时去更新 View 视图 getx + dio + mvvm 说明： View 视图中加载控制器 Controller 控制器 Controller 生命周期载入数据 View 视图触发控制器 Controller 方法改变数据 数据 ViewModel 触发更新视图 Model 数据模型拉取远程数据或者本地数据 分层代码生成与理解 第 1 步: 创建 login 模块 通过右键 “Getx: Full Page” 创建一个 login 的模块 我们创建了一个 login 的模块，文件清单如下 123456789├── login│ ├── bindings.dart│ ├── controller.dart│ ├── index.dart│ ├── state.dart│ ├── view.dart│ └── widgets│ ├─ ...

1.3 基于 GetBuilder 构建Getx Full 存在问题 虽然规范，但文件过多 obs Obx 性能不好 GetBuilder 的模块开发步骤 第 1 步: 创建 Splash 模块 右键菜单 “Getx: GetBuilder Page” 创建模块 “splash” 文件清单 12345└── splash ├── controller.dart ├── index.dart ├── view.dart └── widgets 名称 说明 controller.dart 控制器 view.dart 页面 widgets 子组件（本模块私有） index.dart 导包 第 2 步: 阅读理解代码controller.dart 1234567891011121314151617181920212223242526272829303132import 'package:get/get.dart';class SplashController extends GetxController { ...

1.4 业务模块初始业务模块初始步骤 第 1 步: 业务模块规划模块命名 一层 二层 说明 styles styles_index 样式首页 text 文本 icon 图标 image 图片 buttons 按钮 text_form 输入表单 inputs 输入框 group_list 分组列表 carousel 滚动图片 bottom_sheet 底部弹出框 components 业务组件 other 其它 system splash 首屏 welcome 欢迎 main 主界面 login 登录 register 注册 register_pin 注册 pin user_agreement 用户协议 goods home 商品首页 product_list 商品列表 product_details 商品详情页 category 商品分类页 search search_index 搜索列表 search_filter 搜索筛选 my ...