如何在Flutter滚动视图中实现带中间自适应填充的可滚动Column

核心通过「视口高度约束+自适应Column」的组合实现需求，具体修改逻辑如下：

• 通过LayoutBuilder获取当前可用的视口最大高度
• 给SingleChildScrollView的子节点嵌套ConstrainedBox，设置minHeight为视口高度，不限制最大高度，保证内容高度不足时可以撑满全屏，内容溢出时可以自动延伸
• 内部Column设置mainAxisSize: MainAxisSize.min，适配内容高度变化
• 中间填充区域改用Expanded组件，在内容高度不足时自动填充剩余空间，内容溢出时自动失效，不会触发高度边界错误

import 'package:flutter/material.dart';

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.grey,
        child: SafeArea(
          child: LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) => SingleChildScrollView(
              scrollDirection: Axis.vertical,
              // 新增ConstrainedBox提供最小高度约束
              child: ConstrainedBox(
                constraints: BoxConstraints(
                  minHeight: constraints.maxHeight,
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  mainAxisSize: MainAxisSize.min, // 适配内容高度
                  children: [
                    Container(
                      alignment: Alignment.center,
                      height: 150,
                      width: 250,
                      color: Colors.greenAccent,
                      margin: EdgeInsets.all(8),
                      child: Text('Content')
                    ),
                    Container(
                      alignment: Alignment.center,
                      height: 150,
                      width: 250,
                      color: Colors.pinkAccent,
                      margin: EdgeInsets.all(8),
                      child: Text('Content')
                    ),
                    Container(
                      alignment: Alignment.center,
                      height: 150,
                      width: 250,
                      color: Colors.pink.shade100,
                      margin: EdgeInsets.all(8),
                      child: TextField()
                    ),
                    Expanded( // 替换Flexible为Expanded
                      child: Container(
                        alignment: Alignment.center,
                        color: Colors.blueAccent,
                        margin: EdgeInsets.all(8),
                        child: Text('Flex')
                      ),
                    ),
                    Container(
                      alignment: Alignment.center,
                      height: 100,
                      width: 250,
                      color: Colors.redAccent,
                      margin: EdgeInsets.all(8),
                      child: Text('Footer')
                    ),
                  ]
                ),
              )
            ),
          )
        ),
      ),
    );
  }
}

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