Flutter中Firebase购物车总价无法在Stripe支付中显示的问题

核心问题点 #

1. 异步加载顺序错误：initState中getData()是异步操作，但立刻同步调用getTotalPrice()，此时购物车数据还未从Firestore拉取完成，cart为空，计算结果无效。
2. 多次不必要的setState：在getData()的循环中每次调用setState，既浪费性能，也可能导致totalPrice在数据未完全加载时处于中间状态。
3. 未确保数据加载完成再触发支付：用户可能在购物车数据还没加载完时点击支付，导致传入initPayment的总价为初始值0。

重构代码逻辑 #

1. 优化购物车数据拉取与总价计算

将getData()改为async/await风格，一次性计算总价后再更新状态，避免多次重绘：

List<String> cart = [];
double totalPrice = 0.0;
bool isLoading = false; // 添加加载状态，防止提前点击支付

Future<void> getData() async {
  setState(() {
    isLoading = true;
  });
  
  try {
    final userEmail = FirebaseAuth.instance.currentUser!.email;
    final snapshot = await FirebaseFirestore.instance
        .collection('cart')
        .doc(userEmail)
        .collection('items')
        .get();

    // 清空旧数据，避免重复累加
    cart.clear();
    double calculatedTotal = 0.0;

    for (var doc in snapshot.docs) {
      final priceStr = doc['price'] as String;
      final price = double.parse(priceStr);
      cart.add(priceStr);
      calculatedTotal += price;
    }

    setState(() {
      totalPrice = calculatedTotal;
    });
    print(totalPrice.toStringAsFixed(2));
  } catch (e) {
    // 处理Firestore获取失败的情况
    print('加载购物车数据失败：$e');
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('加载购物车失败，请稍后重试')),
    );
  } finally {
    setState(() {
      isLoading = false;
    });
  }
}

2. 修正initState执行逻辑

只在initState中调用getData()，不需要同步调用getTotalPrice()，因为总价已经在getData()中完成计算：

@override
void initState() {
  super.initState();
  getData();
}

3. 优化支付按钮逻辑

添加加载状态判断，确保数据加载完成后才允许支付，同时直接显示总价：

@override
Widget build(BuildContext context) {
  return Scaffold(
    // ... 其他页面内容
    bottomNavigationBar: Container(
      child: ElevatedButton(
        onPressed: isLoading 
            ? null // 加载时禁用按钮
            : () async {
                final roundedAmount = roundDouble(totalPrice, 2);
                // 防止空购物车支付
                if (roundedAmount <= 0) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('购物车为空，无法发起支付')),
                  );
                  return;
                }
                // 使用当前用户邮箱，避免硬编码
                final userEmail = FirebaseAuth.instance.currentUser!.email ?? 'test@gmail.com';
                await initPayment(
                  amount: roundedAmount, 
                  context: context, 
                  email: userEmail
                );
              },
        child: isLoading 
            ? CircularProgressIndicator(color: Colors.white) 
            : Text(
                '支付：¥${totalPrice.toStringAsFixed(2)}', 
                style: GoogleFonts.hammersmithOne()
              ),
      ),
    ),
  );
}

4. 跳转支付页面的数据传递（如果需要）

如果是跳转到单独的支付页面，确保传递最新的总价：

// 在支付按钮的onPressed中添加跳转逻辑
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => PaymentPage(totalAmount: totalPrice),
  ),
);

// 支付页面接收参数
class PaymentPage extends StatelessWidget {
  final double totalAmount;
  const PaymentPage({super.key, required this.totalAmount});

  @override
  Widget build(BuildContext context) {
    // 在页面中直接使用totalAmount即可
    return Scaffold(
      appBar: AppBar(title: Text('支付页面')),
      body: Center(
        child: Text('需支付金额：¥${totalAmount.toStringAsFixed(2)}'),
      ),
    );
  }
}

额外注意事项 #

• 处理用户未登录的情况：在getData()开头判断FirebaseAuth.instance.currentUser是否为null，避免空指针异常。
• roundDouble方法逻辑正确，确保金额保留两位小数，符合支付系统要求。
• initPayment中的Stripe金额转换正确：由于Stripe使用最小货币单位（如人民币分），乘以100的逻辑是正确的。

内容的提问来源于stack exchange，提问作者Unknown Programmer