我正在使用 ListView.builder 来迭代数据，现在我想使用 gridView 而不是 ListViewBuilder

Question

SingleChildScrollView(
                  child: ListView.builder(
                      shrinkWrap: true,
                      itemCount: iconList.length,//   iconList["total_count"]
                      controller: _controller,
                      itemBuilder: (_, index) => Card(
                          color: Colors.white10,
                          shape: RoundedRectangleBorder(
                            side: const BorderSide(
                              color: Colors.black87,
                            ),
                            borderRadius: BorderRadius.circular(20.0),
                          ),
                          margin:
                          const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
                          child: Column(
                            children: [
                              const Text('IconName'),
                              const Text('Text2'),
                              Card(
                                shape: RoundedRectangleBorder(
                                  side: const BorderSide(
                                    color: Colors.black87,
                                  ),
                                  borderRadius: BorderRadius.circular(20.0),
                                ),
                                child: Text('Download'),
                                color: Colors.purpleAccent,
                                margin: const EdgeInsets.symmetric(
                                    vertical: 5, horizontal: 10),
                              ),
                         //   Image.network(iconList[index]["vector_sizes"][0]["formats"][0]["preview_url"],width: 50,height: 50,),

                              Text("${iconList[index]["icon_id"]}"),
                              Text("${iconList[index]["type"]}"),
                              Text("${iconList[index]["vector_sizes"][0]["formats"][0]["preview_url"]}"),
                           //   Text("${iconList[index][0]["categories"][0]["identifier"]}"),
                              // Text(iconList[index]["icons"][index]["categories"]
                              //         [0]["name"]
                              //     .toString()),
                            ],
                          )
                      ),

                  ),
                ),

我想使用 gridView.builder 和 crossAxiscount-2 显示数据

Answer 1

您可以将

ListView

替换为

GridView

，为网格属性添加

gridDelegate

属性，还可以根据您在 UI 中的设计需要空间自定义

childAspectRatio

。

  SingleChildScrollView(
    child: GridView.builder(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
             crossAxisCount: 2,//how many items in a row
             childAspectRatio: 1,//aspect ratio of height and weight
          ),
          shrinkWrap: true,
          itemCount: iconList.length,//   iconList["total_count"]
          controller: _controller,
          itemBuilder: (_, index) => Card(
              color: Colors.white10,
              shape: RoundedRectangleBorder(
                side: const BorderSide(
                  color: Colors.black87,
                ),
                borderRadius: BorderRadius.circular(20.0),
              ),
              margin:
              const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
              child: Column(
                children: [
                  const Text('IconName'),
                  const Text('Text2'),
                  Card(
                    shape: RoundedRectangleBorder(
                      side: const BorderSide(
                        color: Colors.black87,
                      ),
                      borderRadius: BorderRadius.circular(20.0),
                    ),
                    child: Text('Download'),
                    color: Colors.purpleAccent,
                    margin: const EdgeInsets.symmetric(
                        vertical: 5, horizontal: 10),
                  ),
             //   Image.network(iconList[index]["vector_sizes"][0]["formats"][0]["preview_url"],width: 50,height: 50,),

                  Text("${iconList[index]["icon_id"]}"),
                  Text("${iconList[index]["type"]}"),
                  Text("${iconList[index]["vector_sizes"][0]["formats"][0]["preview_url"]}"),
               //   Text("${iconList[index][0]["categories"][0]["identifier"]}"),
                  // Text(iconList[index]["icons"][index]["categories"]
                  //         [0]["name"]
                  //     .toString()),
                ],
              )
          ),

      ),
    ),