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.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.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 步: ...

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 ...

1.5 config service 配置代码实现 ConfigService 全局配置管理 第 1 步: 安装依赖包 package_info_plus1flutter pub add package_info_plus 第 2 步: 创建 ConfigServicelib/common/services/config.dart 123456789101112131415161718192021import 'package:get/get.dart';import 'package:package_info_plus/package_info_plus.dart';/// 配置服务class ConfigService extends GetxService { // 这是一个单例写法 static ConfigService get to => Get.find(); PackageInfo? _platform; String get version => _platform? ...

1.7 i18n 多语言配置实现步骤： 第 1 步：yaml 配置pubspec.yaml 123dependencies: flutter_localizations: sdk: flutter 第 2 步：定义 keyslib/common/i18n/locale_keys.dart 123456789101112131415161718/// 多语言 keysclass LocaleKeys { // 通用 static const commonBottomSave = 'common_bottom_save'; static const commonBottomRemove = 'common_bottom_remove'; static const commonBottomCancel = 'common_bottom_cancel'; static const commonBottomConfirm = 'common_bottom_confir ...

1.9 显示名、App 图标一、显示名称修改： Androidandroid/app/src/main/AndroidManifest.xml 123456<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.flutter_woo_commerce_getx_learn"> <application android:label="Woo" android:name="${applicationName}" android:icon="@mipmap/ic_launcher"> 修改 android:label 标签 IOSios/Runner/Info.plist 12<key>CFBund ...

1.8 dio 封装参考https://pub.dev/packages/dio https://github.com/flutterchina/dio/blob/master/README-ZH.md 实现步骤： 开始之前请阅读 API 设计规范说明 第 1 步：安装插件 dio123flutter pub add dio# flutter pub add dio_cookie_manager# flutter pub add cookie_jar dio_cookie_manager cookie_jar 这两个我暂时没用上 第 2 步：常量定义lib/common/values/constants.dart 12345/// 常量class Constants { // wp 服务器 static const wpApiBaseUrl = 'https://wpapi.ducafecat.tech'; 第 3 步：单例初始lib/common/services/wp_http ...

1.6 kv 离线存储kv 什么意思key value 的数据格式 ，典型代表 json、Map、 redis https://www.json.org/json-en.html 实现步骤： 第 1 步：安装插件 shared_preferences1flutter pub add shared_preferences 第 2 步：storage 类lib/common/utils/storage.dart 1234567891011121314151617181920212223242526272829303132333435363738394041424344import 'package:shared_preferences/shared_preferences.dart';/// kv离线存储class Storage { // 单例写法 static final Storage _instance = Storage._internal(); factory Storage() => _instance ...