Flutter中实现API返回学生阶段性成绩求和并在Text组件展示

1. 计算成绩总和 #

假设API返回的数据已经解析为List<Map<String, dynamic>>类型的data列表，用fold方法就能快速完成求和：

// 模拟API返回的成绩列表
List<Map<String, dynamic>> data = [
  {'score': 10},
  {'score': 34},
  {'score': 45},
];

// 计算总分，加空判断避免null报错
int totalScore = data.fold(0, (sum, item) => sum + (item['score'] as int? ?? 0));

2. 在Text组件中展示总和 #

直接把计算好的totalScore传入Text组件即可：

Text('学生阶段性成绩总分：$totalScore'),

完整使用示例 #

如果是在StatefulWidget中实现，完整代码如下：

import 'package:flutter/material.dart';

class ScoreTotalPage extends StatefulWidget {
  const ScoreTotalPage({super.key});

  @override
  State<ScoreTotalPage> createState() => _ScoreTotalPageState();
}

class _ScoreTotalPageState extends State<ScoreTotalPage> {
  // 模拟API返回数据
  List<Map<String, dynamic>> data = [
    {'score': 10},
    {'score': 34},
    {'score': 45},
  ];

  late int totalScore;

  @override
  void initState() {
    super.initState();
    // 初始化时计算总分
    totalScore = data.fold(0, (sum, item) => sum + (item['score'] as int? ?? 0));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('成绩统计')),
      body: Center(
        child: Text('学生阶段性成绩总分：$totalScore', style: const TextStyle(fontSize: 20)),
      ),
    );
  }
}

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