19.6 购买品名列表栏

19.6 购买品名列表栏

image-20220805091700812

实现步骤：

第 1 步：组件 BuildProductList

lib/pages/my/order_details/widgets/products_list.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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_woo_commerce_getx_learn/common/index.dart';
import 'package:get/get.dart';

/// 商品列表
class BuildProductList extends StatelessWidget {
  const BuildProductList({
    Key? key,
    required this.lineItems,
    this.currencySymbol,
  }) : super(key: key);

  /// 购物列表
  final List<LineItem> lineItems;

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

  // 标题
  TableRow _tableHeader() {
    return TableRow(
      children: [
        const SizedBox(width: 50),
        TextWidget.body1(LocaleKeys.orderDetailsProduct.tr),
        TextWidget.body1(LocaleKeys.orderDetailsRateQty.tr),
        TextWidget.body1(LocaleKeys.orderDetailsAmount.tr),
      ],
    );
  }

  // 主视图
  Widget _buildView() {
    List<TableRow> ws = [];

    // 头部
    ws.add(_tableHeader());

    // 商品列表
    for (int i = 0; i < lineItems.length; i++) {
      LineItem item = lineItems[i];
      TableRow tr = TableRow(children: [
        // 编号
        TextWidget.body2("${i + 1}").alignCenter(),

        // 图 + 名称
        <Widget>[
          ImageWidget.url(
            Convert.aliImageResize(item.product?.images?[0].src ?? "",
                width: 140),
            width: 70.w,
            height: 70.w,
            radius: AppRadius.image,
          ),
          TextWidget.body2(item.product?.name ?? ""),
        ].toColumn(
          crossAxisAlignment: CrossAxisAlignment.start,
        ),

        // 单价x数量
        TextWidget.body2(
          "${item.price} x ${item.quantity}",
        ),

        // 金额
        TextWidget.body2("$currencySymbol ${item.total}"),
      ]);
      ws.add(tr);
    }

    return Table(
      // 列宽
      columnWidths: const {
        0: FixedColumnWidth(50.0),
        2: FixedColumnWidth(100.0),
        3: FixedColumnWidth(80.0),
      },
      defaultVerticalAlignment: TableCellVerticalAlignment.middle,
      children: ws,
    );
  }

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

第 2 步：视图

lib/pages/my/order_details/view.dart

1
2
3
4
5
6
7
// 商品列表
Widget _buildProductsList() {
  return BuildProductList(
    lineItems: controller.order.lineItems ?? [],
    currencySymbol: controller.order.currencySymbol,
  ).paddingAll(AppSpace.card).card().paddingBottom(AppSpace.listRow);
}

提交代码到 git