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.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.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.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.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.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.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.9 Tab 商品详情实现步骤：
第 1 步：商品详情子视图lib/pages/goods/product_details/widgets/tab_detail.dart
1234// 标题_buildTitle(String title) { return TextWidget.title3(title).paddingBottom(AppSpace.listRow);}
12345678// 内容_buildContent(String? title) { return TextWidget.title2( title ?? "-", softWrap: true, maxLines: 10, ).paddingBottom(AppSpace.listRow * 2);}
123456789101112131415161718192021222324252627282930313233343536@overrideWidget build(B ...
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 ...
