12.2 轮播图
实现步骤：
第 1 步：api 拉取商品数据
lib/common/api/product.dart
1234567/// 商品详情static Future<ProductModel> productDetail(int? id) async { var res = await WPHttpService.to.get( '/products/$id', ); return ProductModel.fromJson(res.data);}
第 2 步：控制器lib/pages/goods/product_details/controller.dart
12345678// 商品 id , 获取路由传递参数int? productId = Get.arguments['id'] ?? 0;// 商品详情ProductModel? product;// Banner 数据List<KeyValueMode ...
12.4 商品标题栏
实现步骤：
第 1 步：图标文字组件 编写lib/common/widgets/icon_text.dart
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465import 'package:flutter/material.dart';import '../index.dart';/// 图标文字组件class IconTextWidget extends StatelessWidget { // 图标 final Widget? icon; // 文字 final String? text; // 图标数据 final IconData? iconData; // 图标尺寸 final double? iconSize; // 文字尺寸 final double? fon ...
12.11 底部按钮实现步骤：
第 1 步：底部按钮lib/pages/goods/product_details/view.dart
123456789101112131415161718192021222324// 底部按钮Widget _buildButtons() { return controller.product == null ? const SizedBox.shrink() : <Widget>[ // 加入购物车 ButtonWidget.secondary( LocaleKeys.gDetailBtnAddCart.tr, ).expanded(), // 间距 SizedBox(width: AppSpace.iconTextLarge), // 立刻购买 ButtonWidget.primary( Local ...
12.3 商品大图显示实现步骤：
第 1 步：安装插件 photo_view
由于 photo_view 插件 github 源码更新快，我们直接引用代码仓
你也可以用 flutter pub add photo_view
pubspec.yaml
12345# 图片预览photo_view: git: url: https://github.com/bluefireteam/photo_view ref: master
第 2 步：图片浏览组件lib/common/components/gallery.dart
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374import 'package:flutter/material.dart';import 'package:flutter ...
12.6 颜色分组组件编写
实现步骤：
第 1 步：离线缓存常量lib/common/values/constants.dart
12// 颜色定义static const storageProductsAttributesColors = 'products_attributes_colors';
第 2 步：定义模型
slug 是颜色值name 是显示的名称
生成定义json to dart
lib/common/models/woo/attribute_model/attribute_model.dart
第 3 步：API 定义
lib/common/api/product.dart
123456789101112131415/// 属性列表/// id 1 颜色 2 尺寸static Future<List<AttributeModel>> attributes(int id) async { v ...
12.5 Tab 页控制栏
实现步骤：
第 1 步：控制器lib/pages/goods/product_details/controller.dart
12class ProductDetailsController extends GetxController with GetSingleTickerProviderStateMixin {
GetSingleTickerProviderStateMixin 是 TickerProvider 的实现，
当需要使用 Animation controller 时，需要在控制器初始化时传递一个 vsync 参数，此时需要用到 TickerProvider
1234// tab 控制器late TabController tabController;// tab 控制器int tabIndex = 0;
12345678_initData() async { await _loadProduct(); // 初始化 tab 控制器 tabController ...
12.8 Tab 商品规格实现步骤：
第 1 步：商品规格 视图lib/pages/goods/product_details/widgets/tab_product.dart
12345678910111213141516171819@overrideWidget build(BuildContext context) { return <Widget>[ ... // 运费说明 _buildTitle("Shipping Charge"), <Widget>[ // 运费 const TextWidget.body1( "\$12.10", size: 18, weight: FontWeight.bold, ).paddingRight(AppSpace.listItem), // 说明 const TextWidget.body2( ...
12.7 tag 分组组件 编写
实现步骤：
第 1 步：tag 分组组件lib/common/components/tags_list.dart
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121import 'package:flutter/material.dart';import '../index.dart';/// 标签列表组件class TagsListWidget extends StatelessWidget { // 点击事件 f ...
13.2 推荐关键词列表
实现步骤：
第 1 步：数据模型json
123456789101112131415161718192021[ { "id": 42, "name": "beanie", "slug": "beanie", "description": "", "count": 1, "_links": { "self": [ { "href": "https://wp.ducafecat.tech/wp-json/wc/v3/products/tags/42" } ], "collection": [ { "hre ...
13.1 搜索栏防抖处理
实现步骤：
第 1 步：搜索栏控制器
lib/pages/search/search_index/controller.dart
12// 搜索控制器final TextEditingController searchEditController = TextEditingController();
123456@overridevoid onClose() { super.onClose(); // 搜索控制器释放 searchEditController.dispose();}
视图
lib/pages/search/search_index/view.dart
1234567891011121314// 导航栏AppBar _buildAppBar() { return AppBar( titleSpacing: AppSpace.listItem, // 搜索栏 title: InputWidget.textBo ...
