Flutter如何将List数组映射为Widget及MappedListIterable类型错误解决

问题原因&修复方案 #

1. 核心报错修复 #

Dart中List.map()方法返回的是MappedListIterable懒加载迭代器类型，并非List类型，而Column组件的children参数要求传入List<Widget>，类型不匹配触发报错。仅需在map调用后追加.toList()方法将迭代器转换为列表即可解决：

children: applicants.map((e) => _PendingCardDonor(e.name, e.contact,"Balubad, Mindoro")).toList(),

2. 其他隐藏问题修复 #

现有代码存在两处逻辑缺陷，会导致后续显示异常，同步修复如下：

• 循环赋值逻辑错误：现有写法每次循环都会直接覆盖applicants为仅含1个元素的数组，最终仅保留最后一条数据，需改为先初始化空数组再追加元素
• 空指针风险：applicants未初始化时首次渲染会触发空报错，需增加加载状态判断

修正后的数据获取逻辑

Future <void> getApplicantInfo() async {
  // 初始化空数组避免空指针
  applicants = [];
  AuthService().getRequestorApplicants().then((val) async {
    store = val.data[0];
    store1 = val.data[1];
    for (var i = 0; i < 2; i++) {
      // 按索引取对应数据，避免每次都取第0项
      var currentData = val.data[i];
      applicants.add(ApplicantsList(
        name: currentData['parentname'], 
        contact: currentData['location']
      ));
    }
    // StatefulWidget中需调用setState触发页面重渲染
    if(mounted) setState((){});
  }); 
}

修正后的渲染逻辑

增加加载状态判断，避免数据未加载完成时报错：

Container(
   child: StreamBuilder<Object>(
   stream: null,
   builder: (context, snapshot) {
     // 数据未加载完成时显示加载提示
     if(applicants == null || applicants.isEmpty) {
       return const Center(child: CircularProgressIndicator());
     }
     return Container(
       height: MediaQuery.of(context).size.height,
       child: ListView(
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          children: <Widget>[
              Column(
                  children: applicants.map((e) => _PendingCardDonor(e.name, e.contact,"Balubad, Mindoro")).toList(),
               ),
            ],
        ));
      }
    ),
  ),

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