如何根据列表中的数据在颤动中渲染多个小部件？

Posted 2023-02-22

【中文标题】如何根据列表中的数据在颤动中渲染多个小部件？

【英文标题】：How to render multiple widgets in flutter according to data from a list?

【发布时间】：2021-03-13 18:06:37

【问题描述】：

我是新来的颤振。我必须根据 API 响应呈现小部件，这是列表中的 JSON。 这是我为其编写的自定义小部件之一。我每行都有一个。

Widget testwidget2() 
      return FutureBuilder<List<inspectionOrder>>(
        future: createIO_Service.viewinspection_Service(),
        builder: (context, snapshot) 
          if (snapshot.hasData) 
            List<inspectionOrder> data = snapshot.data;
            return ListView.builder(
                scrollDirection: Axis.vertical,
                shrinkWrap: true,
                itemCount: data.length,
                itemBuilder: (context, index) 
                  return Container(
                    height: 50,
                    child: Center(child: Text(data[index].RoomType)),
                  );
                );
           else if (snapshot.hasError) 
            return Text("$snapshot.error");
          
          return CircularProgressIndicator();
        ,
      );
    

我使用列表视图中的一系列行来呈现这些小部件。

ListView(
          // decoration: BoxDecoration(
          // border: Border.all(color: Colors.blueAccent,width: 5)),
         padding: const EdgeInsets.all(15.0),
         children: <Widget>[
       Row(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           mainAxisSize: MainAxisSize.max,
           crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
         Expanded( child: workordertile()),

但问题是一次性渲染整个数据（见图 1）。但我希望它呈现为第二张图片所示。第二张图片中的应用程序是 ionic 编写的，我完全不知道。 Picture 1 Picture 2

【问题讨论】：

你的意思是你希望它的用户界面像第二个？

是的！没错，这就是我想要的

你应该一步一步来，先试着做一个像图片一样的白色背景，然后试着做其他的部分，如果你不知道怎么做，你可以问他们一个一，有这个问题，你想要一堆小部件和编辑，这没什么大不了的，但如果你一个一个问他们你会更快得到答案，你可以从这个how to overlay a widget to a container开始等等.. ....

感谢叶海亚的提示。如果您对该解决方案感兴趣，我已经添加了我在 youtube 上找到的解决方案。

【参考方案1】：

你应该使用“lazyloading（分页等）” 你可以使用这个包：https://pub.dev/packages/pagination