Flutter ListView.builder-如何实现复杂的布局

Question

我在尝试使用一种在Flutter中使用ListView.builder来显示更复杂的布局的方法时遇到了麻烦。

1. 我通过http获取项目列表。
2. 我使用ListView.builder来以最佳性能显示它们，因为我得到的物品数量有所不同。
3. 这里是问题：我需要通过以下方式显示项目：第一项应始终为全宽，一张卡片，然后第2项和第3项应位于第一项之后，但在相邻的一列中..此布局应继续重复，直到items.length

这里是一个例子Image of the needed layout

亲切的问候

Answer 1

我假设您的_httpCall未来函数返回一个数组，这是您的代码；

FutureBuilder<List>(
  future: _httpCall(),
  builder: (context, snapshot) {
    if (snapshot.hasData)
      return ListView.builder(
        itemCount: (snapshot.data.length * (2 / 3)).floor(),
        itemBuilder: (context, index) {
          if (index % 3 == 0)
            return Container(
              // Your full-width item
              width: double.maxFinite,
              child: Text("${snapshot.data[index]}"),
            );
          else
            return Row(
              children: [
                Expanded(
                  child: Container(
                    child: Text("${snapshot.data[index]}"),
                  ),
                ),
                Expanded(
                  child: Container(
                    child: Text("${snapshot.data[index + 1]}"),
                  ),
                ),
              ],
            );
        },
      );
    return CircularProgressIndicator();
  },
)