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 ...
0.2 API 接口规范
采用 restful 规范接口设计，设计说明如下
请求 url 示例
操作
URL
说明
post
/orders
新增订单
get
/orders
订单列表
get
/orders/:id
订单详情
put
/orders/:id
修改订单
delete
/orders/:id
删除订单
返回 json 示例
返回分离列表
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412 ...
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 ...
11.2 右侧商品内容列表编写效果
实现步骤：
第 1 步：控制器lib/pages/goods/category/controller.dart
12345678910// 刷新控制器final RefreshController refreshController = RefreshController( initialRefresh: true, // 一开始就自动下拉刷新);// 列表List<ProductModel> items = [];// 页码int _page = 1;// 页尺寸final int _limit = 20;
1234567891011121314151617181920212223242526272829303132// 拉取数据// isRefresh 是否是刷新Future<bool> _loadSearch(bool isRefresh) async { // 拉取数据 var result = await ProductApi.products(Produc ...
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 ...
11.1 左侧导航栏组件效果
实现步骤：
第 1 步：i18nlib/common/i18n/locale_keys.dart
12// 商品 - 分类static const gCategoryTitle = "goods_category_title";
lib/common/i18n/locales/locale_en.dart
12// 商品 - 分类页LocaleKeys.gCategoryTitle: 'All Categories',
lib/common/i18n/locales/locale_zh.dart
12// 商品 - 分类LocaleKeys.gCategoryTitle: '所有分类',
第 2 步：分类数据缓存读取lib/common/values/constants.dart
123// 基础数据// 商品分类static const storag ...
12.1 商品界面初始
实现步骤：
第 1 步：i18n1234567// 商品 - 详情static const gDetailTitle = "goods_detail_title";static const gDetailTabProduct = "goods_detail_tab_product";static const gDetailTabDetails = "goods_detail_tab_details";static const gDetailTabReviews = "goods_detail_tab_reviews";static const gDetailBtnAddCart = "goods_detail_btn_add_cart";static const gDetailBtnBuy = "goods_detail_btn_buy";
lib/common/i18n/locales/locale ...
12.10 Tab 商品评论
实现步骤：
第 1 步：评论模型json 数据格式
123456789101112131415161718192021222324252627282930313233343536[ { "id": 12, "date_created": "2022-04-04T23:36:23", "date_created_gmt": "2022-04-04T15:36:23", "product_id": 13, "status": "approved", "reviewer": "ducafecat5", "reviewer_email": "ducafecat5@gmail.com", "review": "<p>001 - ...
12.12 下拉刷新数据实现步骤：
第 1 步：控制器lib/pages/goods/product_details/controller.dart
1234// 主界面 刷新控制器final RefreshController mainRefreshController = RefreshController( initialRefresh: true,);
12345678910111213// main 下拉刷新void onMainRefresh() async { try { // 拉取商品详情 await _loadProduct(); // 刷新数据 mainRefreshController.refreshCompleted(); } catch (error) { // 刷新失败 mainRefreshController.refreshFailed(); } update(["product_details"] ...
