17.2 购物车 UI 编写

17.2 购物车 UI 编写

image-20220804084233023

实现步骤：

第 1 步：i18n

lib/common/i18n/locale_keys.dart

1
2
3
4
5
6
7
8
// 购物车
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";
static const gCartTextTotal = "goods_cart_text_total";

lib/common/i18n/locales/locale_en.dart

1
2
3
4
5
6
7
8
// 购物车
LocaleKeys.gCartTitle: 'My Cart',
LocaleKeys.gCartBtnSelectAll: 'Select All',
LocaleKeys.gCartBtnApplyCode: 'Apply Code',
LocaleKeys.gCartBtnCheckout: 'Checkout',
LocaleKeys.gCartTextShippingCost: 'Shipping cost',
LocaleKeys.gCartTextVocher: 'Voucher',
LocaleKeys.gCartTextTotal: 'Total',

lib/common/i18n/locales/locale_zh.dart

1
2
3
4
5
6
7
8
// 购物车
LocaleKeys.gCartTitle: '我的购物车',
LocaleKeys.gCartBtnSelectAll: '全选',
LocaleKeys.gCartBtnApplyCode: '使用优惠码',
LocaleKeys.gCartBtnCheckout: '支付',
LocaleKeys.gCartTextShippingCost: '配送费',
LocaleKeys.gCartTextVocher: '代金券',
LocaleKeys.gCartTextTotal: '合计',

第 2 步：购物车视图布局

lib/pages/cart/cart_index/view.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
// 订单列表
Widget _buildOrders() {
  return ListView.separated(
    itemBuilder: (BuildContext context, int index) {
      LineItem item = CartService.to.lineItems[index];
      return Text(item.product?.name ?? "").paddingAll(AppSpace.card).card();
    },
    separatorBuilder: (BuildContext context, int index) {
      return SizedBox(height: AppSpace.listRow);
    },
    itemCount: CartService.to.lineItems.length,
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 优惠券, 568935ab
Widget _buildCoupons() {
  return <Widget>[
    // 输入框
    InputWidget.textBorder(
      hintText: "Voucher Code",
      fillColor: AppColors.surface,
    ).expanded(),

    SizedBox(
      width: AppSpace.listItem,
    ),

    // 应用按钮
    ButtonWidget.text(
      LocaleKeys.gCartBtnApplyCode.tr,
      textColor: AppColors.highlight,
      textSize: 12.sp,
      textWeight: FontWeight.w500,
    ),
  ].toRow();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// 统计
Widget _buildTotal() {
  return <Widget>[
    // 运费、代金券
    <Widget>[
      // 运费
      TextWidget.body3(
          "${LocaleKeys.gCartTextShippingCost.tr}: \$${CartService.to.shipping}"),
      // 代金券
      TextWidget.body3(
          "${LocaleKeys.gCartTextVocher.tr}: \$${CartService.to.discount}"),
    ]
        .toColumn(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
        )
        .expanded(),

    // 费用小计
    TextWidget.body2(
            "${LocaleKeys.gCartTextTotal.tr}: \$${CartService.to.totalItemsPrice - CartService.to.discount + CartService.to.shipping}")
        .paddingRight(AppSpace.iconTextMedium),

    // 确认下单 checkout
    ButtonWidget.primary(
      LocaleKeys.gCartBtnCheckout.tr,
      borderRadius: 3.sp,
    ).tight(
      width: 100.w,
      height: 40.w,
    ),
  ]
      .toRow()
      .paddingAll(AppSpace.card)
      .decorated(
        color: AppColors.highlight.withOpacity(0.1),
        border: Border.all(color: AppColors.highlight, width: 1),
      )
      .height(60.w);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 主视图
Widget _buildView() {
  return <Widget>[
    // 顶部操作栏

    // 订单列表
    _buildOrders().paddingHorizontal(AppSpace.page).expanded(),

    // 优惠券
    _buildCoupons().paddingAll(AppSpace.page),

    // 费用小计
    _buildTotal(),
  ].toColumn();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@override
Widget build(BuildContext context) {
  return GetBuilder<CartIndexController>(
    init: CartIndexController(),
    id: "cart_index",
    builder: (_) {
      return Scaffold(
        appBar: mainAppBarWidget(titleString: LocaleKeys.gCartTitle.tr),
        body: SafeArea(
          child: _buildView(),
        ),
      );
    },
  );
}

提交代码到 git