Flutter：将ListView.builder替换为crossAxisCount=2的GridView.builder

直接把原代码中的ListView.builder替换为GridView.builder，并添加gridDelegate属性指定列数为2，同时调整滚动物理属性避免和外层SingleChildScrollView冲突，修改后的完整代码如下：

SingleChildScrollView(
  child: GridView.builder(
    shrinkWrap: true,
    physics: const NeverScrollableScrollPhysics(), // 避免与外层滚动组件冲突
    itemCount: iconList.length,
    controller: _controller,
    // 指定双列布局
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,
      // 可选：设置列间距和行间距
      crossAxisSpacing: 5,
      mainAxisSpacing: 5,
    ),
    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: const 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替代ListView.builder
• 添加gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2)实现双列布局，还可以通过crossAxisSpacing和mainAxisSpacing设置元素间的间距
• 设置physics: NeverScrollableScrollPhysics()，因为外层已经有SingleChildScrollView，防止嵌套滚动冲突
• 保留原有的itemBuilder逻辑，确保UI展示和之前一致

内容的提问来源于stack exchange，提问作者Venkat Ruthvik Sai Konda