Flutter如何基于JSON接口数据实现可跳转对应测试项的下拉列表

你需要修改状态类变量、异步请求处理、下拉组件渲染三个部分，具体修改如下：

1. 调整State类变量定义 #

把原来写死的模拟列表替换为接口返回的Partner数据存储变量，同时添加加载状态控制：

class _MultipleTestBookingState extends State<MultipleTestBooking> {
  String _selectedDate = DateTime.now().toString();
  // 新增：存储接口返回的合作方列表
  List<Partner> partnerList = [];
  // 新增：加载状态控制
  bool isLoading = true;
  // 新增：存储选中的合作方ID（方便后续跳转传参）
  String? selectedPartnerId;
  // 原来的模拟allLabList、selectedLabFromList变量可以直接删除

2. 处理接口异步请求返回结果 #

在initState中调用接口时，接收返回的合作方列表，更新页面状态：

@override
void initState(){
  super.initState();
  // 处理异步请求结果
  AllPathLab().then((data) {
    setState(() {
      partnerList = data;
      isLoading = false;
      // 可选：默认选中第一个合作方
      if(partnerList.isNotEmpty) {
        selectedPartnerId = partnerList.first.encPartnerId;
      }
    });
  }).catchError((e) {
    setState(() {
      isLoading = false;
    });
    print("接口请求失败：$e");
  });
}

3. 替换下拉组件的数据源 #

修改DropdownButton部分的代码，加载中显示加载提示，加载完成后渲染接口返回的合作方选项，选中时跳转到对应的Test页面：

Padding(
  padding: const EdgeInsets.only(left: 0.0),
  child: isLoading 
    ? const CircularProgressIndicator() // 加载中显示加载动画
    : DropdownButton<String>(
        style: TextStyle(
          color: Colors.green,
          fontSize: 15,
          fontFamily: 'Poppins',
        ),
        value: selectedPartnerId,
        hint: const Text("Select Lab"), // 无选中项时的提示
        onChanged: (value) {
          setState(() {
            selectedPartnerId = value!;
          });
          // 选中后跳转到对应的Test页面，把选中的合作方信息传过去
          if(value != null) {
            Partner selectedPartner = partnerList.firstWhere((p) => p.encPartnerId == value);
            // 替换为你自己的Test页面路由逻辑即可
            Navigator.push(context, MaterialPageRoute(
              builder: (context) => TestPage(
                partnerId: selectedPartner.encPartnerId,
                partnerName: selectedPartner.partnerName,
              )
            ));
          }
        },
        // 把合作方列表转成下拉选项
        items: partnerList.map<DropdownMenuItem<String>>((partner) {
          return DropdownMenuItem(
            child: Text(partner.partnerName),
            value: partner.encPartnerId,
          );
        }).toList(),
      ),
),

注意事项 #

请确保你的Partner模型类已经正确定义了encPartnerId和partnerName两个属性，和接口返回的字段名完全对应。

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