Flutter如何让SingleChildScrollView内Column占满屏幕高度且溢出可滚动

原理说明 #

SingleChildScrollView默认会为子组件提供无上限的高度约束，此时Column会默认收缩到适配内容的最小高度，MainAxisAlignment.spaceBetween的布局规则自然无法生效。

解决方案 #

通过增加高度约束，强制Column在内容不足时至少撑满当前视口高度，内容超出时自动放开高度限制适配内容，同时保留滚动能力。

实现代码 #

LayoutBuilder(
  builder: (context, viewportConstraints) {
    return SingleChildScrollView(
      // 内容不足时禁止滚动，超出时自动启用滚动
      physics: const ClampingScrollPhysics(),
      child: ConstrainedBox(
        // 强制Column最小高度等于当前视口可用高度
        constraints: BoxConstraints(
          minHeight: viewportConstraints.maxHeight,
        ),
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Element1(),
            Element2(),
            Element3(),
          ],
        ),
      ),
    );
  },
)

补充说明 #

• 用LayoutBuilder获取视口高度比直接通过MediaQuery获取屏幕高度更灵活，会自动扣除AppBar、键盘弹出等场景占用的高度，适配更多场景。
• 如果你不需要在内容不足时完全禁止滚动，可以把physics参数换成AlwaysScrollableScrollPhysics()满足自定义交互需求。

内容的提问来源于stack exchange，提问作者F.M.