如何在ListView中使用Wrap实现容器每行排列2个的布局效果

• 你将Wrap组件嵌套在了ListView.builder的itemBuilder内部，每个列表项仅渲染单个盒子，所有列表项会沿着ListView的垂直方向依次排列，自然无法实现一行2个的布局
• 代码中多余嵌套了两层SingleChildScrollView，同时给外层容器设置了和屏幕等高的高度，会限制滚动区域表现

直接替换原有ListView.builder段代码即可：

GridView.builder(
  shrinkWrap: true,
  physics: const NeverScrollableScrollPhysics(), // 外层已有滚动组件，禁止自身滚动避免冲突
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2, // 固定一行展示2个
    crossAxisSpacing: 20, // 横向盒子间距
    mainAxisSpacing: 40, // 纵向盒子间距
    childAspectRatio: 2/1, // 盒子宽高比，可根据实际需求调整
  ),
  itemCount: books.length,
  itemBuilder: (context, index) {
    final book = books[index];
    return InkWell(
      child: Container(
        decoration: const BoxDecoration(
          color: Colors.red,
          borderRadius: BorderRadius.all(Radius.circular(10)),
        ),
        child: Text(book.title),
      ),
    );
  },
)

需要把所有盒子放在同一个Wrap的children数组中，不要嵌套ListView.builder：

Wrap(
  spacing: 20.0,
  runSpacing: 40.0,
  children: books.map((book) {
    return InkWell(
      child: Container(
        height: MediaQuery.of(context).size.height*0.15,
        width: MediaQuery.of(context).size.width*0.4, 
        decoration: const BoxDecoration(
          color: Colors.red,
          borderRadius: BorderRadius.all(Radius.circular(10)),
        ),
        child: Text(book.title),
      ),
    );
  }).toList(),
)

• 移除多余的SingleChildScrollView嵌套，外层仅保留一个滚动组件即可
• 删除外层Container写死的height: MediaQuery.of(context).size.height属性，避免滚动区域受限

内容的提问来源于stack exchange，提问作者TimeToCode