Flutter Scaffold布局中ListView不显示且底部溢出36px问题咨询

问题根因分析 #

1. 横向ListView未显示的原因 #

你的布局嵌套存在两处约束失效问题：

• 最外层Column的第二个子组件是高度为MediaQuery.of(context).size.height的青蓝色Container，直接占满了整个屏幕高度，留给第一个子组件（StreamBuilder）的高度被挤压为0，ListView所在的父容器完全没有显示空间。
• 就算Container不占满高度，StreamBuilder返回的结构里，你在无高度约束的Column内部用Expanded包裹ListView：Expanded只能在**已确定父级最大尺寸的Flex类组件（Row/Column）**中生效，这里外层Column没有绑定任何高度约束，Expanded无法计算可占用的空间，ListView本身的高度也会直接失效。

2. 固定溢出36像素的原因 #

MediaQuery.of(context).size.height返回的是设备整个屏幕的完整高度，而Scaffold的body默认可用高度需要扣除系统占用的高度：

• 顶部状态栏高度
• 底部安全区域（适配全面屏的底部手势条高度）
  两部分加起来的总高度刚好约为36px，你给Container设置了全屏高度，放在可用高度更小的Scaffold body中，底部自然会固定溢出36px左右的高度。

修复方案 #

你可以按如下逻辑修改布局：

1. 最外层Column的两个子组件按需求分配高度，不要给下方Container硬编码全屏高度，用Expanded自动占满剩余空间即可。
2. 移除ListView外层不必要的Column嵌套，直接给横向ListView指定固定高度，避免Expanded约束失效。
3. 建议套SafeArea避免系统栏遮挡内容。

修复后的核心代码示例：

return Scaffold(
  floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
    backgroundColor: Colors.green,
    foregroundColor: Colors.white,
    onPressed: () {
      PostCrud().crearNuevoPostTest(_miId);
    },
  ),
  body: SafeArea(
    child: Column(
      children: [
        // 顶部横向列表区域，指定固定高度适配item尺寸
        StreamBuilder<List<OtroUsuario>>(
          stream: otrosUsuariosBloc.todosOtrosUsuarios(),
          builder: (context, snapshot) {
            if (!snapshot.hasData) return CircularProgressIndicator();
            return Padding(
              padding: const EdgeInsets.only(top: 8.0),
              child: SizedBox(
                height: 120,
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: snapshot.data.length + 1,
                  itemBuilder: (context, index) {
                    // 原有itemBuilder逻辑保持不变
                    if (index == 0) {
                      return Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: GestureDetector(
                          onTap: () {},
                          child: Column(
                            children: [
                              Container(
                                width: 67,
                                height: 67,
                                margin: const EdgeInsets.all(10),
                                decoration: BoxDecoration(
                                    shape: BoxShape.circle,
                                    image: DecorationImage(
                                      fit: BoxFit.fill,
                                      image: AssetImage(
                                          "assets/images/buscar_usuario.png"),
                                    )),
                              ),
                            ],
                          ),
                        ),
                      );
                    } else {
                      var otro_usuario = snapshot.data[index - 1];
                      bool is_ambassador = otro_usuario.is_ambassador;
                      if (is_ambassador) {
                        return GestureDetector(
                          child: Stack(
                            alignment: AlignmentDirectional.center,
                            overflow: Overflow.visible,
                            children: [
                              Column(
                                children: [
                                  Container(
                                    width: 65,
                                    height: 65,
                                    margin:
                                    const EdgeInsets.all(10),
                                    decoration: BoxDecoration(
                                        border: Border.all(
                                          color: Colors.black,
                                          width: 3,
                                        ),
                                        shape: BoxShape.circle,
                                        image: DecorationImage(
                                          fit: BoxFit.fill,
                                          image: NetworkImage(
                                              otro_usuario
                                                  .profile_image),
                                        )),
                                  ),
                                  Text(otro_usuario.username,
                                      style: TextStyle(
                                          fontWeight:
                                          FontWeight.bold,
                                          color: Colors.red)),
                                ],
                              ),
                              Positioned(
                                left: 61,
                                top: 52,
                                child: Container(
                                    height: 22,
                                    width: 22,
                                    child: Image(
                                        image: AssetImage(
                                            "assets/images/home_ambassador.png"))),
                              ),
                            ],
                          ),
                          onTap: () {},
                        );
                      } else {
                        return GestureDetector(
                          child: Column(
                            children: [
                              Container(
                                width: 70,
                                height: 70,
                                margin: const EdgeInsets.all(10),
                                decoration: BoxDecoration(
                                    border: Border.all(
                                      color: Colors.black,
                                      width: 3,
                                    ),
                                    shape: BoxShape.circle,
                                    image: DecorationImage(
                                      fit: BoxFit.fill,
                                      image: NetworkImage(
                                          otro_usuario
                                              .profile_image),
                                    )),
                              ),
                              Text(
                                otro_usuario.username,
                                style: TextStyle(
                                    fontWeight: FontWeight.bold),
                              ),
                            ],
                          ),
                          onTap: () {},
                        );
                      }
                    }
                  }),
              ),
            );
          }),
        // 下方青蓝色区域用Expanded占满剩余空间
        Expanded(
          child: Container(
            color: Colors.teal,
          ),
        )
      ],
    ),
  ),
);

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