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 { ... ...
13.2 推荐关键词列表
实现步骤：
第 1 步：数据模型json
123456789101112131415161718192021[ { "id": 42, "name": "beanie", "slug": "beanie", "description": "", "count": 1, "_links": { "self": [ { "href": "https://wp.ducafecat.tech/wp-json/wc/v3/products/tags/42" } ], "collection": [ { "hre ...
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 ...
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 ...
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.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.3 国家选择器
实现步骤：
第 1 步：数据模型
不要把这种基础数据放在安装包中，动态拉取即可
apifox 中查看接口
数据结构
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394[ { "code": "AF", "name": "非洲", "countries": [ { "code": "AO", "name": "Angolan kwanza&q ...
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 ...
18.1 下单界面编写
实现步骤：
第 1 步：i18nlib/common/i18n/locale_keys.dart
123456789101112131415161718// 下单 checkoutstatic const placeOrderTitle = "place_order_title";static const placeOrderPayment = "place_order_payment";static const placeOrderShippingAddress = "place_order_shipping_address";static const placeOrderQuantity = "place_order_quantity";static const placeOrderPrice = "place_order_price";static const placeOrderPriceShipping = "p ...
