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 ...
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( ...
14.4 过滤面板 - 价格区间
实现步骤：
第 1 步：安装插件 another_xliderpubspec.yaml
12dependencies: another_xlider: 1.0.1+2
指定 1.0.1+2 版本
第 2 步：PriceRangeWidget 组件编写lib/common/components/price_range.dart
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112import 'package:another_xlider/another_xlider.dart';import &#x ...
14.5 过滤面板 - 尺寸
实现步骤：
第 1 步：控制器lib/pages/search/search_filter/controller.dart
12// 尺寸列表List<KeyValueModel<AttributeModel>> sizes = [];
12// 选中尺寸列表List<String> sizeKeys = [];
123456789101112// 读取缓存void _loadCache() async { // 尺寸列表 { String result = Storage().getString(Constants.storageProductsAttributesSizes); sizes = jsonDecode(result).map<KeyValueModel<AttributeModel>>((item) { var arrt = AttributeModel.fromJ ...
14.6 过滤面板 - 颜色
实现步骤：
第 1 步：控制器lib/pages/search/search_filter/controller.dart
12// 颜色列表List<KeyValueModel<AttributeModel>> colors = [];
12// 选中颜色列表List<String> colorKeys = [];
12345678910111213// 读取缓存void _loadCache() async { // 颜色列表 { String result = Storage().getString(Constants.storageProductsAttributesColors); colors = jsonDecode(result).map<KeyValueModel<AttributeModel>>((item) { var arrt = AttributeModel ...
14.3 过滤面板 - 显示
实现步骤：
第 1 步：控制器lib/pages/search/search_filter/controller.dart
1final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
1234// 筛选 打开void onFilterOpenTap() { scaffoldKey.currentState?.openEndDrawer();}
1234// 筛选 关闭void onFilterCloseTap() { Get.back();}
第 2 步：FilterView 视图lib/pages/search/search_filter/widgets/filter_view.dart
123456789101112131415161718192021222324class FilterView ext ...
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 ...
14.2 排序规则下拉栏
实现步骤：
第 1 步：安装插件 dropdown_button21flutter pub add dropdown_button2
第 2 步：DropdownWidget 组件编写lib/common/components/dropdown.dart
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879import 'package:flutter/material.dart';import 'package:dropdown_button2/dropdown_button2.dart';import '../index.dart';/// 下拉菜单class DropdownWidget extends Stateles ...
14.7 过滤面板 - 打分评级
实现步骤：
第 1 步：星级列表组件lib/common/components/stars_list.dart
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970import 'package:flutter/material.dart';import '../index.dart';/// 星级列表组件class StarsListWidget extends StatelessWidget { /// 点击事件 final Function(int value)? onTap; /// 图标 data final IconData? iconData; /// 星级数量 final int starNum; /// 选中的星级 final in ...
14.9 拉取商品 sliver 滚动
实现步骤：
第 1 步：商品 api接口参数
第 2 步：控制器lib/pages/search/search_filter/controller.dart
1234// 商品 tagId , 获取路由传递参数int? tagId = Get.arguments["tagId"] ?? "";// 商品列表List<ProductModel> items = [];
1234567891011121314// 刷新控制器final RefreshController refreshController = RefreshController( initialRefresh: true,);// 页码int _page = 1;// 页尺寸final int _limit = 20;// 排序字段// date, id, include, title, slug, price, popularity and rating. Default is da ...
