Flutter布局问题：实现容器高度自适应且内容溢出时可滚动

你的问题核心在于两点：一是蓝色容器被设置了固定高度导致内容无法滚动，二是未实现动态高度的红色容器固定在顶部的需求。以下是两种可行方案：

方案一：使用NestedScrollView（推荐） #

NestedScrollView可以轻松实现固定顶部的header和可滚动的body，完美匹配你的需求：

return Scaffold(
  appBar: const Header(),
  body: Container(
    color: Colors.yellow,
    child: NestedScrollView(
      // 构建固定在顶部的红色容器
      headerSliverBuilder: (context, innerBoxIsScrolled) => [
        SliverToBoxAdapter(
          child: Container(
            // 这里替换为你的动态高度值
            height: dynamicRedHeight,
            color: Colors.red,
          ),
        ),
      ],
      // 可滚动的蓝色内容区域
      body: SingleChildScrollView(
        child: Container(
          color: Colors.blue,
          child: Column(
            children: [
              Text("Text1"),
              // 模拟大量内容
              ...List.generate(100, (index) => Text("Item $index")),
              Spacer(),
              Text("Text2"),
            ],
          ),
        ),
      ),
    ),
  ),
);

关键说明： #

• 移除蓝色容器的固定height属性，让内容自然撑开高度。
• headerSliverBuilder返回的红色容器会始终固定在页面顶部，不会随body滚动。
• 当蓝色内容高度小于屏幕剩余空间时，整体黄色容器高度为红色高度+蓝色内容高度；当内容超出时，蓝色区域自动滚动。

方案二：使用Column+LayoutBuilder+SingleChildScrollView #

如果不想用NestedScrollView，可以通过布局计算实现：

return Scaffold(
  appBar: const Header(),
  body: Container(
    color: Colors.yellow,
    child: LayoutBuilder(
      builder: (context, constraints) {
        // 获取屏幕可用高度（减去appBar高度）
        final availableHeight = constraints.maxHeight;
        // 动态红色容器高度
        final redHeight = dynamicRedHeight;
        // 蓝色区域可用高度
        final blueAvailableHeight = availableHeight - redHeight;

        return Column(
          children: [
            Container(
              height: redHeight,
              color: Colors.red,
            ),
            // 使用Builder获取子context
            Builder(
              builder: (context) {
                // 测量蓝色内容的高度
                final blueContentKey = GlobalKey();
                WidgetsBinding.instance.addPostFrameCallback((_) {
                  final blueContentHeight = blueContentKey.currentContext?.size?.height ?? 0;
                  // 根据内容高度决定是否允许滚动
                  if (blueContentHeight > blueAvailableHeight) {
                    // 这里可以通过状态管理更新，但方案一更简洁
                  }
                });

                return SizedBox(
                  height: blueAvailableHeight > blueContentHeight ? null : blueAvailableHeight,
                  child: SingleChildScrollView(
                    child: Container(
                      key: blueContentKey,
                      color: Colors.blue,
                      child: Column(
                        children: [
                          Text("Text1"),
                          ...List.generate(100, (index) => Text("Item $index")),
                          Spacer(),
                          Text("Text2"),
                        ],
                      ),
                    ),
                  ),
                );
              },
            ),
          ],
        );
      },
    ),
  ),
);

说明： #

• 通过LayoutBuilder获取可用高度，计算蓝色区域的最大允许高度。
• 使用GlobalKey测量蓝色内容的实际高度，动态调整蓝色容器的高度：内容高度小于可用高度时自适应，超出时限制高度并允许滚动。
• 此方案需要额外的状态管理，复杂度高于方案一，推荐优先使用NestedScrollView。

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