代码之家 › 专栏 › 技术社区 › Antonin GAVREL

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

flutter-layout flutter for-loop

-2

Antonin GAVREL · 技术社区 · 6 年前

下列的 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很容易做到,但对于Flatter,我还没有弄清楚这是如何工作的。

2 回复 | 直到 6 年前

Shubham Gupta 6 年前

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

Antonin GAVREL 6 年前

刚刚用三元法解决了这个问题,非常难看,但它很管用:

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