如何在 Flutter 中每行放置 3 个项目

Question

我有一个列表，其中包含 20 个项目（动态而非固定）。我想将这些项目显示在每行 3 或 4 个项目的容器中。

目前我正在获取附加的输出。

Column(
     mainAxisAlignment: MainAxisAlignment.spaceBetween,
     children: List.generate(itemList.length,
                (index) {
              return Wrap(
                 children: <Widget>[
                  Container(
                      //height:140,
                      child: SizedBox(
                    width: 100.0,
                    height: 50.0,
                    child: Card(
                      color: Colors.white,
                      semanticContainer: true,
                      clipBehavior:
                          Clip.antiAliasWithSaveLayer,
                      shape: RoundedRectangleBorder(
                        borderRadius:
                            BorderRadius.circular(10.0),
                      ),
                      elevation: 5,
                      margin: EdgeInsets.all(10),
                      child: Center(
                        child: Text(
                          (itemList.length[index]
                              .toUpperCase()),
                          style: TextStyle(
                            color: Colors.blue,
                            fontWeight: FontWeight.bold,
                            fontSize: 15.0,
                          ),
                        ),
                      ),
                    ),
                  )),
                ],
              );
                            }),
                          ),

Answer 1

您可以使用名为 的小部件来实现此目的GridView.builder。检查下面的代码以了解如何使用 gridview 小部件：

 GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
         // number of items per row
        crossAxisCount: 3,
         // vertical spacing between the items
         mainAxisSpacing: 10,
         // horizontal spacing between the items
         crossAxisSpacing: 10,
        ),
      // number of items in your list
      itemCount: 20
    ),

要了解有关该GridView小部件的更多信息，请查看以下链接：

Flutter 中的 GridView 小部件

我希望这有帮助。