以特定间隔放置ListView中的小部件

Question

我想在列表中的第四个元素处放置一个Container。但是它似乎替代了第四个要素。如何在元素之间添加。

Container(
      padding: EdgeInsets.all(20),
      child: ListView.builder(
          itemCount: 20,
          itemBuilder: (context, index) {
            if((index +1) %4 == 0){
              return Column(
                children: <Widget>[
                  Container(
                    margin: EdgeInsets.all(20),
                    child: Center(child: Text("Container")),
                  ),
                ],
              );
            }
            return Card(
              margin: EdgeInsets.only(top: 4, bottom:4, left: 20, right: 20),
              elevation: 2,
              child: ListTile(
                onTap: () {},
                title: Text("Record ${index + 1}", style: TextStyle(fontSize: 18),),[enter image description here][1]
              ),
            );
          }),
    )

Answer 1

Container(
  padding: EdgeInsets.all(20),
  child: ListView.builder(
    itemCount: 20,
    itemBuilder: (context, index) {
      return Column(
        children: <Widget>[
          Card(
            margin: EdgeInsets.only(top: 4, bottom: 4, left: 20, right: 20),
            elevation: 2,
            child: ListTile(
              onTap: () {},
              title: Text(
                "Record ${index + 1}",
                style: TextStyle(fontSize: 18),
              ),
            ),
          ),
          if ((index + 1) % 4 == 0)
            Container(
              margin: EdgeInsets.all(20),
              child: Center(child: Text("Container")),
            ),
        ],
      );
    },
  ),
)