05-变量
06-输出
07-输入
08-转换数据类型
09-运算符
01-Python 简介
02-Python 解释器
03-PyCharm
04-注释
05-变量
0.2 API 接口规范
采用 restful 规范接口设计,设计说明如下
请求 url 示例
操作
URL
说明
post
/orders
新增订单
get
/orders
订单列表
get
/orders/:id
订单详情
put
/orders/:id
修改订单
delete
/orders/:id
删除订单
返回 json 示例
返回分离列表
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412 ...
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 ...
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.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 { ...
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 封装解决了什么问题, ...