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: ...
17.6 购物商品数量修改
实现步骤:
第 1 步:QuantityWidget 数量编辑组件lib/common/components/quantity.dart
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768import 'package:flutter/cupertino.dart';import '../index.dart';/// 数量编辑class QuantityWidget extends StatelessWidget { // 数量发送改变 final Function(int quantity) onChange; // 数量 final int quantity; // 尺寸 final double? size; // 文字尺寸 final double? ...
17.5 优惠券使用实现步骤:
第 1 步:优惠券模型json
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748[ { "id": 55, "code": "568935ab", "amount": "5.00", "status": "publish", "date_created": "2022-04-03T21:00:38", "date_created_gmt": "2022-04-03T13:00:38", "date_modified": "2022-04-03T21:00:38", ...
19.2 订单详情页面
实现步骤:
第 1 步:控制器lib/pages/my/order_details/controller.dart
12// 订单详情final OrderModel order = Get.arguments as OrderModel;
第 2 步:视图lib/pages/my/order_details/view.dart
顶部标题组件
123456789101112131415161718// 标题Widget _buildTitle() { return <Widget>[ // Order ID TextWidget.title3( "${LocaleKeys.orderDetailsOrderID.tr} : ${controller.order.id}") .expanded(), // 15 Jan 2019 TextW ...
19.1 订单列表页面
实现步骤:
第 1 步:i18nlib/common/i18n/locale_keys.dart
123456789101112131415// 订单页static const orderListTitle = "order_list_title";static const orderDetailsTitle = "order_details_title";static const orderDetailsOrderID = "order_details_order_id";static const orderDetailsBillFrom = "order_details_bill_from";static const orderDetailsBillTo = "order_details_bill_to";static const orderDetailsProduct = "order_details_product ...
19.3 状态横向展示
实现步骤:
第 1 步:抽取业务组件 StepHorizontalItemWidgetlib/common/components/steps.dart
定义状态枚举,三态
123456/// 状态枚举enum StepStatus { none, running, success,}
横向滚动组件
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566/// 横向状态class StepHorizontalItemWidget extends StatelessWidget { /// 状态名称 final String statusName; /// 状态 final StepStatus status; const StepHorizontalItemWidget({ Key ...
19.4 状态纵向展示
实现步骤:
第 1 步:业务组件 StepVerticalItemWidgetlib/common/components/steps.dart
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091/// 纵向状态class StepVerticalItemWidget extends StatelessWidget { /// 状态名称 final String statusName; /// 状态描述 final String? statusDes; /// 状态时间 final String? statusDateTime; /// 状态 final StepStatus status; const StepV ...
19.6 购买品名列表栏
实现步骤:
第 1 步:组件 BuildProductListlib/pages/my/order_details/widgets/products_list.dart
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788import 'package:flutter/material.dart';import 'package:flutter_screenutil/flutter_screenutil.dart';import 'package:flutter_woo_commerce_getx_learn/common/index.dart';import ' ...