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 ...
15.2 ListTileWidget 组件封装实现步骤：
官方的 ListTile 虽然很方便，但是有两个主要问题
不能改高度
自定义能力还有点不足
所以我们项目中需要自己去实现一个 ListTileWidget
第 1 步：功能分析
功能：
左右图标
标题、子标题、描述
尺寸、间距、边距
事件、点击、长按
第 2 步：组件代码lib/common/widgets/list_tile.dart
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109import 'package:flutter/material.dart';import &#x ...
15.3 功能列表、注销
实现步骤：
第 1 步：列表项抽取 ButtonItemWidgetlib/pages/my/my_index/widgets/button_item.dart
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667import 'package:flutter/material.dart';import 'package:flutter_screenutil/flutter_screenutil.dart';import 'package:flutter_woo_commerce_getx_learn/common/index.dart';/// 按钮列表项class ButtonItemWidget extends StatelessWidget ...
15.1 sliver 头部栏位编写
实现步骤：
第 1 步：i18nlib/common/i18n/locale_keys.dart
123456789101112131415static const myTabWishlist = "my_tab_wishlist";static const myTabFollowing = "my_tab_following";static const myTabVoucher = "my_tab_voucher";static const myBtnMyOrder = "my_btn_my_order";static const myBtnMyWallet = "my_btn_my_wallet";static const myBtnEditProfile = "my_btn_edit_profile";static const myBtnAddress = "my_btn_addre ...
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 ...
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 ...
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.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.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.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 ...
