Flutter测验应用如何存储用户点击的选项值并提交至POST请求接口

解决步骤 #

1. 替换存储答案的状态变量

你之前使用的局部变量sent每次选中新选项都会被覆盖，无法存储所有题目的作答记录。首先在当前页面的State类中定义一个全局Map来存储答案，支持自动覆盖同一题的修改结果：

// 写在State类内部，不要放在build方法中
Map<int, int> userAnswers = {};

2. 修改选项选中的回调逻辑

调整CustomCheckBoxGroup的选中回调，把每次的作答结果存入上面定义的Map：

checkBoxButtonValues: (values) {
  // 取出当前题目的ID和选中的选项ID
  int questionId = values[0][0] as int;
  int optionId = values[0][1] as int;
  // 存入Map，同一题重复选择会自动更新答案
  userAnswers[questionId] = optionId;
  print("当前已存储的答案：$userAnswers");
},

3. 组装符合接口要求的请求参数

修改saveAnswer方法中的参数组装逻辑，把Map转换为接口要求的数组格式：

Future<Sent> saveAnswer() async {
  setState(() {
    _isloading = true;
  });

  // 组装接口要求的参数格式
  Map<String, dynamic> data = {
    "data": userAnswers.entries.map((entry) {
      return {
        "question_id": entry.key,
        "option_id": entry.value
      };
    }).toList()
  };

  // 后续请求逻辑保持不变即可
  var url = await Network().link("/exercise/1/saveAnswer");
  SharedPreferences localStorage = await SharedPreferences.getInstance();
  final token = jsonDecode(localStorage.getString('token'));
  http.Response response = await http.post(Uri.parse(url), body: json.encode(data), headers: {
    'Content-type': 'application/json',
    'Accept': 'application/json',
    'Authorization': 'Bearer $token'
  });
  if (response.statusCode == 200) {
    print(response.body);
    print("Save success");
  } else {
    print(response.body);
    print("Save failed");
  }
}

可选优化：提交前校验是否答完所有题

如果要求用户必须完成所有题目才能提交，可以在组装参数前增加校验逻辑：

// snapshot.data.result.length为题目总数，根据你的实际变量名调整即可
if(userAnswers.length != snapshot.data.result.length) {
  ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text("请完成所有题目后提交")));
  setState(() {
    _isloading = false;
  });
  return;
}

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