Flutter中如何让ListView高度根据内容动态调整？

方法1：用SingleChildScrollView + Row替代（推荐，性能更优） #

既然你设置了NeverScrollableScrollPhysics，说明不需要ListView自身滚动，这种情况下用Row配合SingleChildScrollView能更高效实现高度自适应——Row会自动根据子项的最大高度调整自身高度，SingleChildScrollView负责横向滚动（若内容超出屏幕）。

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  padding: EdgeInsets.zero,
  child: Row(
    children: imageList.map((image) {
      return Padding(
        padding: EdgeInsets.only(right: 10.w),
        child: Column(
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(8),
              child: Image.file(
                File(image.path),
                fit: BoxFit.cover,
                width: 80,
                height: 80,
              ),
            ),
            Padding(
              padding: EdgeInsets.only(top: 4),
              child: Text(
                image.description ?? "",
                style: TextStyle(fontSize: 15.sp, color: Colors.black),
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ],
        ),
      );
    }).toList(),
  ),
)

方法2：保留ListView.builder，用IntrinsicHeight包裹 #

如果必须使用ListView.builder（比如需要懒加载大量数据），可以用IntrinsicHeight组件包裹ListView，它会自动测量子项高度并约束ListView的高度，实现自适应效果：

IntrinsicHeight(
  child: ListView.builder(
    padding: EdgeInsets.zero,
    scrollDirection: Axis.horizontal,
    shrinkWrap: true,
    physics: const NeverScrollableScrollPhysics(),
    itemCount: imageList.length,
    itemBuilder: (context, index) {
      var image = imageList[index];

      return Padding(
        padding: EdgeInsets.only(right: 10.w),
        child: Column(
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(8),
              child: Image.file(
                File(image.path),
                fit: BoxFit.cover,
                width: 80,
                height: 80,
              ),
            ),
            Padding(
              padding: EdgeInsets.only(top: 4),
              child: Text(
                image.description ?? "",
                style: TextStyle(fontSize: 15.sp, color: Colors.black),
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ],
        ),
      );
    },
  ),
)

注意事项 #

• IntrinsicHeight会触发两次布局测量，子项数量较多时可能影响性能，优先选择方法1。
• 两种方案都移除了固定高度的SizedBox，让组件高度完全由内容决定。

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