17.3 购物车数据列表

17.3 购物车数据列表

image-20220804090740048

实现步骤：

第 1 步：阿里图片尺寸调整

lib/common/utils/convert.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/// 转换
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/resize,w_$_width,m_lfit$crop';
  }
}

oss 图片加工 https://help.aliyun.com/document_detail/101260.html

oss 图片参数 https://help.aliyun.com/document_detail/44688.html

第 2 步：编写数据项组件

lib/pages/cart/cart_index/widgets/cart_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
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
89
90
91
92
93
94
95
96
97
98
import 'package:flutter/cupertino.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_woo_commerce_getx_learn/common/index.dart';
import 'package:get/get.dart';

import '../index.dart';

/// 购物车列表项
class CartItem extends StatelessWidget {
  /// 订单数据
  final LineItem lineItem;

  /// 修改数量事件
  final Function(int)? onChangeQuantity;

  /// 选中事件
  final Function(bool)? onSelect;

  const CartItem({
    Key? key,
    required this.lineItem,
    this.onChangeQuantity,
    this.onSelect,
  }) : super(key: key);

  // 主视图
  Widget _buildView() {
    // 商品
    ProductModel product = lineItem.product!;

    return <Widget>[
      // 图片
      ImageWidget.url(
        Convert.aliImageResize(
          product.images?.first.src ?? "",
          width: 100.w,
        ),
        fit: BoxFit.cover,
        width: 78.w,
        height: 100.w,
        radius: AppRadius.image.w,
      ).paddingRight(AppSpace.iconTextSmail),

      // 标题、金额、数量
      <Widget>[
        // 标题
        TextWidget.title3(lineItem.name ?? "").paddingBottom(AppSpace.listRow),

        // 属性 Color
        if (product.attributes?.isNotEmpty == true)
          TextWidget.body2(
            "${product.attributes?.first.name} - ${product.attributes?.first.options} ",
          ),

        // 属性 Size
        if (product.attributes?.length == 2)
          TextWidget.body2(
            "${product.attributes?[1].name} - ${product.attributes?[1].options} ",
          ),

        // List<Widget>.generate(
        //   product.attributes?.length ?? 0,
        //   (index) => TextWidget.body2(
        //     "${product.attributes?[index].name} - ${product.attributes?[index].options} ",
        //   ),
        // ).toRow(),

        // 金额 + 数量
        <Widget>[
          // 金额
          TextWidget.body2(
            "\$ ${lineItem.total}",
            weight: FontWeight.bold,
          ).expanded(),

          // end
        ].toRow().paddingTop(AppSpace.listRow),

        // end
      ]
          .toColumn(
            crossAxisAlignment: CrossAxisAlignment.start,
          )
          .expanded(),

      // end
    ].toRow();
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<CartIndexController>(
        id: "goods_${lineItem.productId}",
        builder: (controller) {
          return _buildView();
        });
  }
}

第 3 步：视图页

lib/pages/cart/cart_index/view.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 订单列表
Widget _buildOrders() {
  return ListView.separated(
    itemBuilder: (BuildContext context, int index) {
      LineItem item = CartService.to.lineItems[index];
      // 购物车项
      return CartItem(
        lineItem: item,
      ).paddingAll(AppSpace.card).card();
    },
    separatorBuilder: (BuildContext context, int index) {
      return SizedBox(height: AppSpace.listRow);
    },
    itemCount: CartService.to.lineItems.length,
  );
}

提交代码到 git