如何限制ListViewBuilder每行展示条目数，实现满5个自动换行

你当前使用的横向滚动ListView.builder为单行滚动布局，不支持自动换行。要实现每行固定5个条目、满行自动切换到下一行的效果，直接替换为GridView.builder组件即可，适配成本极低且性能不受影响。

核心修改逻辑 #

• 替换ListView.builder为GridView.builder
• 配置SliverGridDelegateWithFixedCrossAxisCount的crossAxisCount: 5，强制每行展示5个条目
• 可通过mainAxisSpacing、crossAxisSpacing快速配置条目之间的横竖间距
• 保留原有itemBuilder内的所有业务逻辑无需改动，适配成本极低

修改后完整代码 #

Container(
  height: 215.0,
  child: GridView.builder(
    padding: const EdgeInsets.symmetric(
      vertical: 12.0,
      horizontal: 8.0,
    ),
    // 配置每行固定5个条目
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 5,
      // 可选：配置横向条目间距
      crossAxisSpacing: 10,
      // 可选：配置纵向行间距
      mainAxisSpacing: 10,
      // 可选：调整条目宽高比，根据你的设计需求修改
      childAspectRatio: 1,
    ),
    itemCount: contentList.length,
    itemBuilder: (BuildContext context, int index) {
      final Content content = contentList[index];
      return GestureDetector(
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => BookingCard()),
          );
        },
        child: Stack(
          alignment: Alignment.center,
          children: [
            Container(
              // 原来的横向margin可以删掉，用上面的crossAxisSpacing统一控制即可
              margin: const EdgeInsets.symmetric(horizontal: 10.0),
              height: 300.0,
              width: 300.0,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage(content.imageUrl),
                  fit: BoxFit.cover,
                ),
                shape: BoxShape.circle,
                border: Border.all(color: content.color, width: 3.0),
              ),
            ),
            Container(
              height: 300.0,
              width: 300.0,
              decoration: BoxDecoration(
                gradient: const LinearGradient(
                  colors: [
                    Colors.black87,
                    Colors.black45,
                    Colors.transparent,
                  ],
                  stops: [0, 0.25, 1],
                  begin: Alignment.bottomCenter,
                  end: Alignment.topCenter,
                ),
                shape: BoxShape.circle,
                border: Border.all(color: content.color, width: 3.0),
              ),
            ),
            // Positioned(
            //   left: 0,
            //   right: 0,
            //   bottom: 0,
            //   child: SizedBox(
            //     height: 60.0,
            //     child: Image.asset(content.titleImageUrl),
            //   ),
            // ),
          ],
        ),
      );
    },
  ),
)

备选方案（仅当必须使用ListView时选用） #

如果因为业务需求必须保留ListView结构，可以手动对数据做分组，每5条数据为一组，ListView的每个item对应一行，每行内用Row包裹5个条目。该方案实现相对繁琐，且500条数据场景下性能不如GridView.builder，不优先推荐。

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