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

Question

在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，我尚未弄清楚这是如何工作的。

Answer 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),
    )
 );

Answer 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,
                                                ),
                                ]