9.3 轮播广告 ad
这个组件是一个轮播图组件，再叠加一个指示器组件合成
实现步骤：
第 1 步：下载插件 carousel_slider1flutter pub add carousel_slider
第 2 步：创建 kv 模型lib/common/models/kv.dart
123456789101112131415161718192021222324/// key value 键值对class KeyValueModel<T> { String key; T value; KeyValueModel({required this.key, required this.value}); factory KeyValueModel.fromJson(Map<String, dynamic> json) { return KeyValueModel( key: json['key'] as String, value: jso ...
6.8 错误全局处理实现步骤：
第 1 步：错题体数据结构错误信息采用全局统一的数据格式
12345{ "statusCode": 400, "error": "registration-error-email-exists", "message": "已存在使用此电子邮件地址的帐户"}
statusCode 遵循 http status 标准error 是一个错误文字标识message 是错误描述，你可以显示给客户
第 2 步：错误数据 modellib/common/models/error_message.dart
123456789101112131415161718192021222324252627/// 错误体信息class ErrorMessageModel { int? statusCode; String? error; String? message; ErrorMessag ...
9.5 分类栏编写
这是一个横向混动
实现步骤：
第 1 步：分类列表项编写lib/common/components/category_item.dart
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556import 'package:flutter/material.dart';import 'package:flutter_screenutil/flutter_screenutil.dart';import '../index.dart';/// 分类导航项class CategoryListItemWidget extends StatelessWidget { /// 分类数据 final CategoryModel category; /// 选中代码 final int? selectId; /// t ...
9.2 搜索栏
实现步骤：
第 1 步：搜索栏编写lib/pages/goods/home/controller.dart
12// 导航点击事件void onAppBarTap() {}
lib/pages/goods/home/view.dart
12345678910111213141516171819202122232425262728293031323334// 导航栏AppBar _buildAppBar() { return AppBar( // 背景透明 backgroundColor: Colors.transparent, // 取消阴影 elevation: 0, // 标题栏左侧间距 titleSpacing: AppSpace.listItem, // 搜索栏 title: InputWidget.search( // 提示文字，多语言 hintText: LocaleKeys. ...
9.6 商品列表项封装
我们的目标是很多地方能复用这个商品列表项，看着很有规律由 主图、标题、价格 三个组成，然后自适应宽高
实现步骤：
ProductItemWidget 产品项业务组件
lib/common/components/product_item.dart
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091import 'package:flutter/material.dart';import 'package:get/get.dart';import '../index.dart';/// 商品展示项class ProductItemWidget extends Statel ...
9.4 数据模型、API（分类、商品）实现步骤：
第 1 步：分类返回数据结构
12345678910111213141516171819202122232425262728293031323334[ { "id": 34, "name": "Bag", "slug": "bag", "parent": 0, "description": "", "display": "default", "image": { "id": 63, "date_created": "2022-04-09T09:58:41", "date_created_gmt": "2022-04-09T01:58:41& ...
9.9 占位图
大家已经发现了，因为首页拉取的数据比较多，所以首屏展示慢。（如多次请求、网络延迟等等）大家可以放一张占位图，加强下用户体验
实现步骤：
第 1 步：添加图片
将占位图放在这个位置assets/images/3.0x/home_placeholder.png
通过 vscode Flutter GetX Generator - 猫哥 插件 生成 x2 x1 尺寸图
配置图片资源索引lib/common/values/images.dart
第 2 步：占位图组件lib/common/components/placehold.dart
123456789101112131415161718192021import 'package:flutter/material.dart';import '../index.dart';/// 占位图组件class PlaceholdWidget extends StatelessWidget &# ...
8.1 导航栏编写布局
实现步骤：
第 1 步：i18n 多语言lib/common/i18n/locale_keys.dart
12345// APP 主导航static const tabBarHome = 'tab_bar_home';static const tabBarCart = 'tab_bar_cart';static const tabBarMessage = 'tab_bar_message';static const tabBarProfile = 'tab_bar_profile';
lib/common/i18n/locales/locale_en.dart
12345// APP 导航LocaleKeys.tabBarHome: 'Home',LocaleKeys.tabBarCart: 'Cart',LocaleKeys.tabBarMessage: 'M ...
9.7 推荐商品栏编写实现步骤：
第 1 步：商品栏标题编写
这个可以复用所有抽取出来了主要有 标题、次标题、更多点击事件 三块完成
lib/pages/goods/home/widgets/list_title.dart
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647import 'package:flutter/material.dart';import 'package:flutter_woo_commerce_getx_learn/common/index.dart';import 'package:get/get.dart';/// 列表标题class BuildListTitle extends StatelessWidget { /// 标题 final String title; /// 次标题 final Stri ...
8.2 图标组件加 Badge 提示效果
实现步骤：
第 1 步：输入接口1234/// 图标组件class IconWidget extends StatelessWidget { ... final String? badgeString; // Badge 文字
第 2 步：build 实现123456789101112131415161718192021@overrideWidget build(BuildContext context) { ... // 文字、数字 if (badgeString != null) { return Badge( badgeContent: Text( badgeString!, style: TextStyle( color: AppColors.onPrimary, fontSize: 9, ), ), position: BadgePosition.topEnd(top: -7, ...
