Flutter中Wrap嵌套ListView.builder报constraints.hasBoundedHeight错误求解

问题原因 #

Wrap组件的交叉轴（此处为垂直方向）不会给子元素提供固定高度约束，而横向滚动的ListView即使设置了shrinkWrap: true，依然需要明确的垂直高度才能完成布局，这就导致了constraints.hasBoundedHeight相关的布局错误。

具体解决方案 #

方案1：给ListView指定固定高度 #

直接给ListView外层套一个SizedBox，明确垂直方向的高度（高度值根据你的_Category组件实际尺寸调整）：

child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
      Wrap(
        alignment: WrapAlignment.start,
        crossAxisAlignment: WrapCrossAlignment.center,
        direction: Axis.horizontal,
        spacing: 10,
        runSpacing: 15,
        children: [
          const CompatiblesInput(),
          SizedBox(
            height: 40, // 自定义合适高度
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              shrinkWrap: true,
              itemCount: categories.length,
              itemBuilder: (context, index) {
                final category = categories[index];
                return _Category(title: category, index: index);
              },
            ),
          ),
          const _AddCategory(),
        ],
      ),
      if (categories.isEmpty) CategoryProvider.nullCheck(),
      if (categories.length >= 5) CategoryProvider.maxCheck(),
      const SizedBox(height: 10),
    ],
 ),

方案2：用Row替代Wrap（无需换行场景） #

如果你的子元素不需要自动换行特性，直接用Row组件替换Wrap，结合Expanded即可正常布局：

child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
      Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          const CompatiblesInput(),
          const SizedBox(width: 10),
          Expanded(
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              shrinkWrap: true,
              itemCount: categories.length,
              itemBuilder: (context, index) {
                final category = categories[index];
                return _Category(title: category, index: index);
              },
            ),
          ),
          const SizedBox(width: 10),
          const _AddCategory(),
        ],
      ),
      if (categories.isEmpty) CategoryProvider.nullCheck(),
      if (categories.length >= 5) CategoryProvider.maxCheck(),
      const SizedBox(height: 10),
    ],
 ),

方案3：Wrap+SingleChildScrollView替代横向ListView #

要保留Wrap的换行特性，同时实现横向滚动效果，可以把横向ListView换成SingleChildScrollView+Row的组合：

child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
      Wrap(
        alignment: WrapAlignment.start,
        crossAxisAlignment: WrapCrossAlignment.center,
        direction: Axis.horizontal,
        spacing: 10,
        runSpacing: 15,
        children: [
          const CompatiblesInput(),
          SizedBox(
            height: 40, // 自定义合适高度
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(
                children: categories.map((category) {
                  int index = categories.indexOf(category);
                  return _Category(title: category, index: index);
                }).toList(),
              ),
            ),
          ),
          const _AddCategory(),
        ],
      ),
      if (categories.isEmpty) CategoryProvider.nullCheck(),
      if (categories.length >= 5) CategoryProvider.maxCheck(),
      const SizedBox(height: 10),
    ],
 ),

内容的提问来源于stack exchange，提问作者Joaquín Varela