18.2 送货地址栏位
实现步骤：
第 1 步：UserService 加入送货地址简述lib/common/services/user.dart
123/// 送货地址String get shipping => "${profile.shipping?.address1}, ${profile.shipping?.postcode}, ${profile.shipping?.state}, ${profile.shipping?.country}";
第 2 步：控制器lib/pages/cart/buy_now/controller.dart
12// 送货地址String shippingAddress = "";
123456// 初始_initData() { shippingAddress = UserService.to.shipping; updat ...
2.1 主题配置（明亮、黑暗）主题样式配置，实现步骤：
第 1 步：下载颜色配置https://material-foundation.github.io/material-theme-builder/#/custom
吸取设计稿中的主色
lib/common/style/lib_color_schemes.g.dart
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465import 'package:flutter/material.dart';const seed = Color(0xFF5F84FF);const lightColorScheme = ColorScheme( brightness: Brightness.light, primary: seed, onPrimary: Color(0xFFFFFFFF), p ...
2.2 字体、颜色、圆角、间隙配置样式配置，实现步骤：
整个 app 的样式需要统一规范的管理，你可以理解成常量抽取定义。
第 1 步：颜色一个 app 在生产的时候不会只有 md3 定义的那么几种颜色，毕竟每家都有自己的一套设计系统。
如 饿了么
这里就有 成功、警告、失败、提示 几个颜色
lib/common/style/colors.dart
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283import 'package:flutter/material.dart';import 'package:get/get.dart';/// 应用颜色class AppColors { /// *********************** ...
18.3 数量修改, 小计栏位
实现步骤：
第 1 步：控制器lib/pages/cart/buy_now/controller.dart
12345678// 数量int quantity = 1;// 运费double get shipping => 0;// 折扣double get discount => 0;// 商品合计价格double get totalPrice => double.parse(product.price!) * quantity;
12345678// 修改数量void onQuantityChange(int value) { if (value <= 0) { value = 1; } quantity = value; update(["buy_now"]);}
第 2 步：价格行组件lib/pages/cart/buy_now/widgets/price ...
18.4 优惠券栏位
实现步骤：
第 1 步：i18n 多语言lib/common/i18n/locale_keys.dart
1234// 优惠码static const promoCode = "promo_code";static const promoDesc = "promo_desc";static const promoEnterCodeTip = "promo_enter_code_tip";
lib/common/i18n/locales/locale_en.dart
12345// 优惠码LocaleKeys.promoCode: 'Apply Promo Code',LocaleKeys.promoDesc: 'Promo Code is simply dummy text the printing and typesetting industry',LocaleKeys.promoEn ...
18.5 下单成功界面
实现步骤：
第 1 步：api 接口接口地址 post /orders
数据格式
12345678910111213141516171819202122232425262728293031323334{ "billing": { "first_name": "ducafe", "last_name": "cat", "company": "", "address_1": "bj", "address_2": "", "city": "bj", "state": "CN2", "postcode": ...
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: ...
