Flutter如何添加API学期参数筛选数据并解决展示重复问题？

1. 给API添加学期筛选参数 #

首先修改API调用函数，新增学期参数并传入请求URL的查询参数中，同时完善错误处理逻辑：

static Future<List<DataKuliahModel>> getDataKuliah(String semester) async {
  String url = Constant.baseURL;
  String token = await UtilSharedPreferences.getToken();

  final response = await http.get(
    // 将学期参数拼接为API查询参数，符合后端筛选要求
    Uri.parse('$url/auth/mhs_siakad/perwalian/get_paket?semester=$semester'),
    headers: {'Authorization': 'Bearer $token'},
  );

  // 处理请求失败场景
  if (response.statusCode != 200) {
    throw Exception('加载课程失败，状态码: ${response.statusCode}');
  }

  // 解析后端返回的对应学期课程列表（假设返回data为数组格式）
  final List<dynamic> result = jsonDecode(response.body)['data'];
  return result.map((item) => DataKuliahModel.fromMap(item)).toList();
}

注：如果后端返回的data仍为Map结构（仅包含当前学期的课程键值对），可保留原返回类型Map<String, DataKuliahModel>，后续展示逻辑需对应调整。

2. 修复卡片重复显示问题 #

之前所有卡片显示相同数据的核心原因是：仅从API返回的Map中取了单条数据，所有卡片复用该数据。现在API返回对应学期的完整课程列表，需遍历列表生成独立卡片，同时优化FutureBuilder的使用避免重复请求：

步骤1：在State类中管理请求Future #

避免每次build都重新发起请求，将Future存为State变量：

class YourCoursePageState extends State<YourCoursePage> {
  late Future<List<DataKuliahModel>> _coursesFuture;
  String _selectedSemester = '2'; // 默认选中第2学期

  @override
  void initState() {
    super.initState();
    // 初始化加载默认学期数据
    _coursesFuture = Services.getDataKuliah(_selectedSemester);
  }

  // 用户切换学期时调用此方法
  void _switchSemester(String newSemester) {
    setState(() {
      _selectedSemester = newSemester;
      // 更新Future，触发重新请求
      _coursesFuture = Services.getDataKuliah(newSemester);
    });
  }

  // ... build方法
}

步骤2：修改FutureBuilder展示逻辑 #

遍历课程列表生成独立卡片：

FutureBuilder<List<DataKuliahModel>>(
  future: _coursesFuture, // 使用State中管理的Future
  builder: (context, snapshot) {
    // 加载中状态
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const Center(child: CircularProgressIndicator());
    }
    // 错误状态
    if (snapshot.hasError) {
      return Center(child: Text('出错了: ${snapshot.error}'));
    }
    // 空数据状态
    if (!snapshot.hasData || snapshot.data!.isEmpty) {
      return const Center(child: Text('该学期暂无课程'));
    }

    // 遍历课程列表，为每个课程生成独立卡片
    return Column(
      children: snapshot.data!.map((course) {
        return Container(
          width: MediaQuery.of(context).size.width,
          margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(8),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.2),
                spreadRadius: 1,
                blurRadius: 9,
                offset: const Offset(1, 2),
              ),
            ],
          ),
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  course.matakuliah,
                  style: bold6,
                  textAlign: TextAlign.center,
                ),
                // 可添加更多课程信息，如学分、授课教师等
              ],
            ),
          ),
        );
      }).toList(),
    );
  },
)

关键说明 #

• 重复显示原因：之前仅从API返回的Map中取单条数据，所有卡片复用该数据导致重复。现在通过遍历对应学期的课程列表，每个卡片绑定独立的课程数据解决问题。
• Future优化：将Future存为State变量，仅在学期切换时重新创建Future，避免build方法执行时重复发起API请求。

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