Flutter如何解决RenderFlex hasSize报错：FutureBuilder内嵌ListView.builder布局异常

错误根因 #

RenderBox was not laid out: 'hasSize' 报错是Flutter布局阶段常见的约束问题，你代码里的问题出在横向滚动的ListView没有获取到明确的宽度约束，同时列表子项ItemCard也没有指定固定宽度，导致布局计算时无法确定组件尺寸。

修复方案 #

1. 给横向ListView的外层容器增加宽度约束
   横向滚动的ListView必须同时有明确的高度和宽度约束，你之前只设置了高度，缺少宽度配置。
2. 给每个ItemCard指定固定宽度
   横向列表的子项如果不指定宽度，会默认尝试撑满无限宽的滚动容器，导致布局失败。
3. （优化）避免重复调用接口
   你在build方法和FutureBuilder的future参数里各调用了一次controller.getir()，会导致接口重复请求，建议将请求操作提前到初始化阶段执行。

修复后的代码示例 #

FutureBuilder<dynamic> get futureBuilder {
  return FutureBuilder(
    future: controller.getir(),
    builder: (context, AsyncSnapshot snapshot) {
      if (snapshot.hasData) {
        wordList = snapshot.data;
        return Container(
          height: Get.height/3,
          width: Get.width, // 新增：给外层容器设置宽度
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            shrinkWrap: true,
            itemCount: wordList.length,
            itemBuilder: (context, index) {
              Word? _word = wordList[index];
              // 新增：给每个ItemCard指定固定宽度，可根据需求调整比例
              return SizedBox(
                width: Get.width * 0.85,
                child: ItemCard(
                  word: _word,
                  input1: controller.controllerInput1,
                  input2: controller.controllerInput2,
                ),
              );
            },
          ),
        );
      }
      // 加载状态也配置固定尺寸，避免布局跳动
      return SizedBox(
        height: Get.height/3,
        width: Get.width,
        child: Center(
          child: CircularProgressIndicator(),
        ),
      );
    });
}

如果修改后还有布局溢出问题，可以再给ItemCard内部的最外层Card组件增加宽度约束，或者调整内部Flex组件的flex分配比例即可。

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