18.3 数量修改, 小计栏位

18.3 数量修改, 小计栏位

image-20220729102114483

实现步骤：

第 1 步：控制器

lib/pages/cart/buy_now/controller.dart

1
2
3
4
5
6
7
8
// 数量
int quantity = 1;
// 运费
double get shipping => 0;
// 折扣
double get discount => 0;
// 商品合计价格
double get totalPrice => double.parse(product.price!) * quantity;
1
2
3
4
5
6
7
8
// 修改数量
void onQuantityChange(int value) {
  if (value <= 0) {
    value = 1;
  }
  quantity = value;
  update(["buy_now"]);
}

第 2 步：价格行组件

lib/pages/cart/buy_now/widgets/price_line.dart

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
41
import 'package:flutter/material.dart';
import 'package:flutter_woo_commerce_getx_learn/common/index.dart';

/// 价格行组件
class BuildPriceLine extends StatelessWidget {
  const BuildPriceLine({
    Key? key,
    this.titleString,
    this.priceString,
    this.leftWidget,
    this.rightWidget,
  }) : super(key: key);

  /// 标题 字符串
  final String? titleString;

  /// 价格 字符串
  final String? priceString;

  /// 左侧组件
  final Widget? leftWidget;

  /// 右侧组件
  final Widget? rightWidget;

  // 主视图
  Widget _buildView() {
    return <Widget>[
      // 左侧
      leftWidget?.expanded() ?? TextWidget.body2(titleString ?? "").expanded(),

      // 右侧
      rightWidget ?? TextWidget.body2(priceString ?? ""),
    ].toRow().paddingBottom(AppSpace.listRow);
  }

  @override
  Widget build(BuildContext context) {
    return _buildView();
  }
}

第 3 步：视图

lib/pages/cart/buy_now/view.dart

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
// 小计
Widget _buildPrice() {
  return <Widget>[
    // Shipping: $2.05
    BuildPriceLine(
      titleString: LocaleKeys.placeOrderPriceShipping.tr,
      priceString: "\$${controller.shipping}",
    ),

    // Discount: $3.05
    BuildPriceLine(
      titleString: LocaleKeys.placeOrderPriceDiscount.tr,
      priceString: "\$${controller.discount}",
    ),

    // Voucher Code:
    BuildPriceLine(
      titleString: LocaleKeys.placeOrderPriceVoucherCode.tr,
      rightWidget: ButtonWidget.text(
        LocaleKeys.placeOrderPriceVoucherCodeEnter.tr,
        textSize: 9,
        textColor: AppColors.highlight,
      ),
    ),

    // Total: $14.60
    BuildPriceLine(
      leftWidget: TextWidget.body1(LocaleKeys.placeOrderTotal.tr),
      rightWidget: TextWidget.body1(
          "\$${controller.totalPrice - controller.discount}"),
    ),

    //
  ].toColumn().paddingBottom(AppSpace.listRow);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 主视图
Widget _buildView() {
  return <Widget>[
    ...

    // 数量
    _buildTitle(LocaleKeys.placeOrderQuantity.tr),
    QuantityWidget(
      quantity: controller.quantity,
      onChange: controller.onQuantityChange,
    ).paddingBottom(AppSpace.listRow),

    // 小计
    _buildTitle(LocaleKeys.placeOrderPrice.tr),
    _buildPrice(),

提交代码到 git