Flutter中如何根据模型属性动态渲染指定数量的Icon

没关系哒，刚接触Dart/Flutter遇到这类问题太正常啦😉

错误原因分析 #

你遇到的报错'The element type List<Icon> can't be assigned to the list type Widget'，本质是类型不匹配：

• Row的children属性要求的是一个List<Widget>（也就是一堆Widget的集合）
• 但你现在写的children: <Widget>[ _starsForRatings() ]，是把_starsForRatings()返回的整个List<Icon>当成了children列表里的单个元素，相当于给children传了一个[List<Icon>]，这自然不符合List<Widget>的要求（毕竟List<Icon>不是Widget）

几种可行的解决方案 #

方案1：使用展开运算符...拆分列表

通过展开运算符把_starsForRatings()返回的列表元素逐个“拆”出来，放到Row的children列表中：

Row(
  children: <Widget>[
    ..._starsForRatings(), // 三个点展开列表，把里面的Icon逐个加入children
  ],
)

方案2：直接将函数返回的列表赋值给children

因为Icon是Widget的子类，_starsForRatings()返回的List<Icon>本质就是List<Widget>，所以可以直接赋值，不用额外套一层[]：

Row(
  children: _starsForRatings(), // 直接用函数返回的列表作为children的数据源
)

方案3：简化写法——用List.generate直接生成列表

如果不需要单独保留_starsForRatings()函数，还可以用List.generate一步生成图标列表，代码更简洁：

Row(
  children: List.generate(_rating, (index) => Icon(Icons.star)),
)

小提示 #

以后遇到类似的集合嵌套问题，先检查是不是把整个列表当成单个元素传递了，展开运算符...在Flutter的布局代码里会经常用到哦～

内容的提问来源于stack exchange，提问作者L-R