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.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"] ...
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.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.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.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.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 ...
14.1 顶部导航
实现步骤：
第 1 步：i18nlib/common/i18n/locale_keys.dart
1234567891011// 搜索static const searchPlaceholder = "search_placeholder";static const searchOrder = "search_order";static const searchFilter = "search_filter";static const searchFilterPrice = "search_filter_price";static const searchFilterSize = "search_filter_size";static const searchFilterColor = "search_filter_color";static const searchFilterReview = "sear ...
12.7 tag 分组组件 编写
实现步骤：
第 1 步：tag 分组组件lib/common/components/tags_list.dart
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121import 'package:flutter/material.dart';import '../index.dart';/// 标签列表组件class TagsListWidget extends StatelessWidget { // 点击事件 f ...
