Flutter购物车页面：如何汇总API列表项计算总金额？

要实现购物车的总小计、总运费和总包装费汇总，需要先遍历所有商品数据计算总和，再把汇总信息放在商品列表下方统一展示，而非每个商品单独显示统计项。修改后的代码如下：

controller.obx((response) => response != null
    ? Column(
        children: [
          // 商品列表区域
          Expanded(
            child: ListView.builder(
              scrollDirection: Axis.vertical,
              shrinkWrap: true,
              itemCount: response.length,
              itemBuilder: (BuildContext context, index) {
                // 仅展示商品基础信息，比如名称、单价、购买数量
                return ListTile(
                  title: Text(response[index].product!.name!),
                  subtitle: Text('${response[index].quantity} × ${response[index].product!.price} tk'),
                );
              },
            ),
          ),
          // 汇总统计区域
          Container(
            padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            decoration: BoxDecoration(
              border: Border(top: BorderSide(color: Colors.grey.shade300)),
            ),
            child: Column(
              children: [
                // 计算总小计：所有商品(数量×单价)之和
                final totalSubTotal = response.fold(0.0, (sum, item) => sum + (item.quantity!.toDouble() * item.product!.price!.toDouble()));
                ListTile(
                  title: Text('Sub Total'.tr.toString()),
                  trailing: Text('${totalSubTotal.toStringAsFixed(2)} tk'),
                ),
                ListTile(
                  title: Text('Discount'.tr.toString()),
                  trailing: Text('00 tk'),
                ),
                // 计算总运费：所有商品(数量×单件运费)之和
                final totalDeliveryCharge = response.fold(0.0, (sum, item) => sum + (item.quantity!.toDouble() * item.product!.shippingCost!.toDouble()));
                ListTile(
                  title: Text('Delivery Charge'.tr.toString()),
                  trailing: Text('${totalDeliveryCharge.toStringAsFixed(2)} tk'),
                ),
                // 计算总包装费：根据每个商品的basketQty累加
                final totalPackagingCost = response.fold(0, (sum, item) => sum + (item.basketQty == '1' ? 50 : 120));
                ListTile(
                  title: Text('Packaging Cost'.tr.toString()),
                  trailing: Text('$totalPackagingCost tk'),
                ),
                // 可选：添加最终总计行
                ListTile(
                  title: Text('Total'.tr.toString()),
                  trailing: Text('${(totalSubTotal + totalDeliveryCharge + totalPackagingCost).toStringAsFixed(2)} tk'),
                  textColor: Colors.green,
                  trailingTextColor: Colors.green,
                ),
              ],
            ),
          ),
        ],
      )
    : Text('购物车为空'))

关键修改说明： #

• 用Column拆分商品列表和汇总区域，商品列表嵌套Expanded避免布局溢出问题
• 借助fold方法遍历所有商品数据，分别计算总小计、总运费、总包装费的总和
• 将统计汇总项从单个商品项中移出，统一放在商品列表下方，作为整个购物车的全局统计
• 用toStringAsFixed(2)格式化金额，保证显示两位小数，符合金额展示的常规规范

内容的提问来源于stack exchange，提问作者Mehedi Hasan Sumon