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

【问题标题】：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 上找到的解决方案。

标签： flutter flutter-layout conditional-rendering

【解决方案1】：

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

【讨论】：