Flutter中Column组件内使用三元运算符出现类型报错如何修复？

错误原因 #

• 你在集合for循环内部额外加了一对大括号包裹三元表达式，Dart会将这对大括号识别为Set类型字面量，而Column的children参数要求传入List<Widget>类型，类型不匹配触发报错。
• 额外注意：你当前定义的usrMap使用{}声明，实际是Set类型（无序列、元素自动去重），如果需要使用有序、允许重复的普通数组，需要改为[]声明。

修复步骤 #

1. 删掉for循环内部包裹三元表达式的大括号，Dart集合for语法直接返回表达式结果，不需要额外包裹
2. 调整类型判断逻辑匹配需求：如果要区分图片链接和普通文本，将判断条件改为匹配图片后缀/图片域名规则，对应分支返回Image组件即可
3. 如需要使用数组存储数据，将usrMap的声明符号从{}改为[]

修复后完整代码 #

Widget build(BuildContext context) {
    // 改为[]声明普通数组，若确实需要Set特性可以保留{}
    final usrList = ["tom", 'tom.png', "taommy"];
    return MaterialApp(
      title: 'Flutter Tutorial',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Text Widget Tutorial'),
        ),
        body: Column(
          children: [
            // 去掉for内部的大括号
            for(var prop in usrList)
              // 调整判断逻辑适配需求，这里示例判断是否是png图片链接
              prop.endsWith(".png") ? Image.network(prop) : Text(prop)
        ]
         ),
      ),
    );
  }

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