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.8 过滤面板 - 品牌、性别、新旧
实现步骤：
第 1 步：定义常量lib/common/values/constants.dart
1234567// 品牌static const storageProductsAttributesBrand = 'products_attributes_brand';// 性别static const storageProductsAttributesGender = 'products_attributes_gender';// 新旧static const storageProductsAttributesCondition = 'products_attributes_condition';
第 2 步：缓存数据lib/pages/goods/home/controller.dart
12345678910111213141516171819_initData() async { ... ...
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 ...
16.2 选择器封装实现步骤：
封装组件有一个原则，按需要封装，逐步完善，丰富功能
第 1 步：安装 flutter_picker modal_bottom_sheet 插件pubspec.yaml
12345dependencies: # picker 选择器 flutter_picker: 2.0.3 # 底部弹出 modal_bottom_sheet: 2.0.1
第 2 步：根据 array 数据生成选着器lib/common/utils/picker.dart
1234567891011121314151617181920212223242526272829303132333435363738394041424344import 'package:flutter/material.dart';import 'package:flutter_picker/Picker.dart';import 'package:flutter_woo_commerce_getx_learn/commo ...
16.1 地址表单编写
实现步骤：
第 1 步：i18nlib/common/i18n/locale_keys.dart
12345678910111213// 订单配送地址static const addressViewTitle = "address_view_title";static const addressFirstName = "address_first_name";static const addressLastName = "address_last_name";static const addressCountry = "address_country";static const addressState = "address_state";static const addressPostCode = "address_post_code";static const addressCity = "addr ...
16.4 洲省选择器
实现步骤：
第 1 步：控制器lib/pages/my/my_address/controller.dart
1234// 洲省数据List<KeyValueModel> statesList = [];// 洲省市选择List<int> statesSels = [];
123456789101112131415161718// 取洲省数据void _filterStates(String countryCode) { for (var i = 0; i < continents.length; i++) { var continent = continents[i]; var country = continent.countries!.firstWhereOrNull((el) => el.code == countryCode); if (country != null) { statesList = L ...
17.1 商品页加购物车
实现步骤：
第 1 步：购物车数据结构
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182"line_items": [ ...
17.2 购物车 UI 编写
实现步骤：
第 1 步：i18nlib/common/i18n/locale_keys.dart
12345678// 购物车static const gCartTitle = "goods_cart_title";static const gCartBtnSelectAll = "goods_cart_btn_select_all";static const gCartBtnApplyCode = "goods_cart_btn_apply_code";static const gCartBtnCheckout = "goods_cart_btn_checkout";static const gCartTextShippingCost = "goods_cart_text_shipping_cost";static const gCartTextVocher = "goods_cart_text_vocher&qu ...
17.3 购物车数据列表
实现步骤：
第 1 步：阿里图片尺寸调整lib/common/utils/convert.dart
123456789101112131415161718/// 转换class Convert { // 阿里图片尺寸调整 static String aliImageResize( String url, { double width = 300, double? maxHeight, }) { var crop = ''; int _width = width.toInt(); int? _maxHeight = maxHeight?.toInt(); if (maxHeight != null) { crop = '/crop,h_$_maxHeight,g_center'; } return url + '?x-oss-process=image/ ...
17.4 多选单选购物项&删除实现步骤：
第 1 步：CheckBox 选择框组件
lib/common/widgets/checkbox.dart
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164import 'package: ...
