Flutter：如何使用 { } 在 for 循环中拥有不同类型的小部件答案

【问题标题】：Flutter : How to use { } to have different kind of widgets in for loopsFlutter：如何使用 { } 在 for 循环中拥有不同类型的小部件
【发布时间】：2020-09-07 08:26:39
【问题描述】：

在this answer 之后，如何使用 for 循环进行迭代以呈现不同的小部件？

我举一个例子说明我想要达到的目标：

final List<String> mylist = ["baba", "bibi", "bobo"];
final List<String> mylist2 = ["haha", "hihi", "hoho"];

...


                             children: <InlineSpan>[

                                    for ( int i = 0; i < mylist.length; i++ )
                                    { // this does not work unfortunately
                                            TextSpan(
                                                text: mylist[i],
                                                style: TextStyle(
                                                    height: 1.0,
                                                    color: Colors.white,
                                                    fontSize: 20,
                                                    fontWeight: FontWeight.bold,
                                                ),
                                            MySpan(
                                                text: mylist2[i],
                                                style: TextStyle(
                                                    height: 1.0,
                                                    color: Colors.blue,
                                                    fontSize: 20,
                                                    fontWeight: FontWeight.bold,
                                                ),


                                       }  // this does not work 



                                ]

当然我可以做以下工作：

                                    for ( int i = 0; i < mylist.length; i++ )

                                            TextSpan(
                                                text: mylist[i],
                                                style: TextStyle(
                                                    height: 1.0,
                                                    color: Colors.white,
                                                    fontSize: 20,
                                                    fontWeight: FontWeight.bold,
                                                ),

但我希望其他小部件跟随。

那么如何在 for 循环中包装许多项目以呈现不同类型的项目？使用 React 很容易完成，但对于 Flutter，我还没有弄清楚它是如何工作的。

【问题讨论】：

你不能有一个地图列表吗？
没有。这就是我问这个问题的原因......我使用非常不同类型的小部件。我只是简化了这个问题。
您可以创建一个函数，该函数接受两个列表参数并返回可以分配children: 的小部件列表。
我知道，但“List”不是“InlineSpan”类型的子类型
我刚刚解决了，如果您有更优雅的方式给出完整详细的答案，我很乐意选择它是否有效

标签： for-loop flutter flutter-layout

【解决方案1】：

您可以尝试制作一个List<InlineSpan> 并直接在RichText 中使用它这是一个例子。

List<InlineSpan> getData(List mylist,List mylist2) {
  List<InlineSpan> temp = [];

  for (int i = 0; i < mylist.length; i++) {
    temp.add(
      TextSpan(
      text: mylist[i],
      style: TextStyle(
        height: 1.0,
        color: Colors.white,
        fontSize: 20,
        fontWeight: FontWeight.bold,
      ),
    ),
  );

   temp.add(
     TextSpan(
       text: mylist2[i],
       style: TextStyle(
         height: 1.0,
         color: Colors.blue,
         fontSize: 20,
         fontWeight: FontWeight.bold,
       ),
     ),
   );
  }
  return temp;
}

然后像这样使用它

RichText(
  text:TextSpan(
    children:getData(mylist,mylist2),
    )
 );

【讨论】：

谢谢你，我会试一试，看起来比我想出的更具可读性。
你可以试试DartPad
不幸的是它不起作用：类型 'MySpan"' 不是类型 'String' 的子类型
stackoverflow.com/questions/61902559/… , MySpan 是 SecretWord 类
由于您的MySpan 是Widget，因此将TextSpan 替换为WidgetSpan。

【解决方案2】：

刚刚使用三元解决了它，非常难看，但是嘿，它有效：

children: <InlineSpan>[

                                    for ( int i = 0; i < mylist.length * 2; i++ )
                                            i & 1 == 0 ? TextSpan(
                                                text: mylist[(i / 2).toInt()],
                                                style: TextStyle(
                                                    height: 1.0,
                                                    color: Colors.white,
                                                    fontSize: 20,
                                                    fontWeight: FontWeight.bold,
                                                ) :
                                            MySpan(
                                                text: mylist2[(i / 2).toInt()],
                                                style: TextStyle(
                                                    height: 1.0,
                                                    color: Colors.blue,
                                                    fontSize: 20,
                                                    fontWeight: FontWeight.bold,
                                                ),
                                ]

【讨论】：