Flutter ListView.builder固定高度适配：如何避免小屏设备布局溢出？

方案1：动态计算最大可用高度限制（推荐） #

你可以通过系统API获取屏幕和组件固定高度，计算出ListView的最大允许高度，用ConstrainedBox替代固定高度的Container即可兼顾大小屏适配：

1. 先在build方法中计算可用高度：

@override
Widget build(BuildContext context) {
  // 获取屏幕基础参数
  final screenHeight = MediaQuery.of(context).size.height;
  final appBarHeight = kToolbarHeight; // 如使用自定义AppBar请替换为对应高度
  final safeAreaVerticalPadding = MediaQuery.of(context).padding.top + MediaQuery.of(context).padding.bottom;
  // 页面固定占用高度：SearchInput高度 + 你设置的300间距，SearchInput高度可根据实际调整，也可通过GlobalKey动态获取
  final fixedOccupiedHeight = 50 + 300; 
  // 计算得到ListView最大可用高度
  final maxListHeight = screenHeight - appBarHeight - safeAreaVerticalPadding - fixedOccupiedHeight;

  return SafeArea(
    // 原有Scaffold代码不变...
  );
}

2. 替换原有ListView外层的固定高度Container：

resultList.isNotEmpty
    ? ConstrainedBox(
        constraints: BoxConstraints(
          maxHeight: maxListHeight,
        ),
        child: ListView.builder(
          shrinkWrap: true, // 内容少于最大高度时，自适应内容高度
          itemCount: 20,
          itemBuilder: (context, index) {
            return Text('Heyyyy!');
          },
        ),
      )
    : const SizedBox()

该方案会严格保留你设置的300间距，小屏时自动压缩ListView最大高度避免溢出，大屏时内容不足也不会强行占满高度，完全符合原有布局逻辑。

方案2：无需手动计算高度，调整Column参数即可 #

你之前用Flexible出现布局错乱，是因为Column默认mainAxisSize为max，会占满父容器全部高度，调整参数即可修复：

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  mainAxisSize: MainAxisSize.min, // 新增：让Column高度随内容自适应，不强行占满屏幕
  children: [
    SearchInput(onSubmitHandler: onSubmit),
    const SizedBox(height: 300),
    if (resultList.isNotEmpty)
      Flexible(
        fit: FlexFit.loose, // 新增：只占用ListView需要的高度，不强行占满剩余空间
        child: ListView.builder(
          shrinkWrap: true,
          itemCount: 20,
          itemBuilder: (context, index) => Text('Heyyyy!'),
        ),
      )
  ],
)

该方案无需手动计算高度，会自动适配所有屏幕尺寸，原有居中逻辑和间距也可以保留。

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