Question

我的问题是，我有一个 API 提供的图标列表（CustomWidgets）。我需要把这个图标放在我的应用程序中，但是当有 7 个或更多时，它看起来像这样：

我想将图标放在不同的行中。我尝试了一种将列表分成 2 份并动态添加的方法，但没有打印任何内容，因为我使用的是 FutureBuilder 来打印图标。

代码如下：

FutureBuilder(
            future: investCall, //API CALL
            initialData: [], //NULL SAFE
            builder: (context, snapshot) {
              if (snapshot.hasData){
                return investCodes();
              }else {
                return Divider();
              }
            }, //BARRA DE REDES SOCIALES
          ),

方法投资代码();我添加图标的地方

Widget investCodes(){
List<Widget> iconos= []; //EMPTY ICON LIST
for (var object in _investCodes){
  //print('Pintando: '+sn.accesto); DEBUG CONSOLE
  iconos.add(
          Flexible(
          flex: 1,
          child: Container(
            child: GestureDetector(
              onLongPress: (){
                /*...*/
              },
              //JAVA ANDROID ONCLICK LISTENER
              onTap: (){
                _launchURL(object.rfUrl);
              },
              child: Center(
                child: Container(
                  padding: EdgeInsets.only(left: 2.0.h, right: 2.0.h),
                  height: 3.0.h,
                  child: FadeInImage(
                    image: NetworkImage(object.rfIconUrl),
                    placeholder: AssetImage('assets/sn-placeholder.png'),
                  ),
                ),
              ),
            ),
          ),
      )
  );
}


  return Container(
      /*HERE I WANT TO ADD A COLUMN WITH MULTIPLE ROWS*/
      padding: EdgeInsets.all(18.0),
      width: 100.0.w,
      child: Row(
        children: iconos, //LIST OF ICONS
      )
  );
}

Answer 1

我的建议是在您的情况下使用 Wrap 而不是 Row，小部件将放置在第二行空间不足

有一种方法可以做到：

      return Container(
      padding: EdgeInsets.all(16.0),
      width: 100.0.w,
        child: Center(
          child: Wrap(
            spacing: 10.0,
            runSpacing: 10.0,
            direction: Axis.horizontal,
            crossAxisAlignment: WrapCrossAlignment.center,
            children:iconos, //LIST OF ITEMS
          ),
        ),
  );

Final Solution in App

如何在颤振中动态添加行？

1 个答案: