19.7 费用小计

19.7 费用小计

image-20220805093101654

实现步骤：

第 1 步：组件 BuildTotalItem

lib/pages/my/order_details/widgets/total_item.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
import 'package:flutter/material.dart';
import 'package:flutter_woo_commerce_getx_learn/common/index.dart';

/// 小计项
class BuildTotalItem extends StatelessWidget {
  const BuildTotalItem({
    Key? key,
    this.title,
    this.price,
    this.currencySymbol,
  }) : super(key: key);

  /// 标题
  final String? title;

  /// 价格
  final String? price;

  /// 货币符号
  final String? currencySymbol;

  // 主视图
  Widget _buildView() {
    return <Widget>[
      // title
      TextWidget.body1(title ?? "").expanded(),

      // price
      TextWidget.body2("$currencySymbol $price"),
    ].toRow();
  }

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

第 2 步：视图

lib/pages/my/order_details/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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
// 小计
Widget _buildTotal() {
  return <Widget>[
    // 左侧
    <Widget>[
      // Payment Method
      TextWidget.body1(LocaleKeys.orderDetailsPaymentMethod.tr),

      // VISA Card Payment
      const TextWidget.body2("VISA Card Payment"),

      // Balance 余额
      BuildTotalItem(
        title: LocaleKeys.orderDetailsBalance.tr,
        currencySymbol: controller.order.currencySymbol,
        price: "0",
      ),
    ]
        .toColumn(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.start,
        )
        .expanded(),

    // 间距
    SizedBox(
      width: AppSpace.iconTextMedium,
    ),

    // 右侧
    <Widget>[
      // Total
      BuildTotalItem(
        title: LocaleKeys.orderDetailsTotal.tr,
        currencySymbol: controller.order.currencySymbol,
        price: controller.order.total,
      ),

      // Shipping
      BuildTotalItem(
        title: LocaleKeys.orderDetailsShipping.tr,
        currencySymbol: controller.order.currencySymbol,
        price: controller.order.shippingTotal,
      ),

      // Discount
      BuildTotalItem(
        title: LocaleKeys.orderDetailsDiscount.tr,
        currencySymbol: controller.order.currencySymbol,
        price: controller.order.discountTotal,
      ),
    ]
        .toColumn(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
        )
        .expanded(),
  ].toRow().height(100).paddingAll(AppSpace.card).card();
}

提交代码到 git