Flutter中如何在带滚动的Column内使用FractionallySizedBox？

你碰到的这个报错核心原因很明确：SingleChildScrollView的可滚动区域是无限高度的，但Expanded组件必须依赖父级提供确定的高度约束，才能计算自身的flex占比。两者直接嵌套就会出现布局逻辑冲突，触发RenderBox was not laid out的断言错误。

我们可以给Column外层套一个ConstrainedBox，通过MediaQuery获取屏幕的可用高度，让Column拥有明确的高度约束——这样Expanded就能正常分配空间，同时SingleChildScrollView依然能处理键盘弹出时的滚动需求。

修改后的完整代码如下：

Scaffold(
  resizeToAvoidBottomInset: true,
  appBar: AppBar(centerTitle: true, title: const Text('test')),
  body: SingleChildScrollView(
    child: ConstrainedBox(
      // 计算屏幕除去AppBar和状态栏后的可用高度，作为Column的最小高度
      constraints: BoxConstraints(
        minHeight: MediaQuery.of(context).size.height - 
            AppBar().preferredSize.height - 
            MediaQuery.of(context).padding.top,
      ),
      child: Column(
        // 让Column在内容高度小于屏幕时自适应，大于时允许滚动
        mainAxisSize: MainAxisSize.min,
        children: [
          Expanded(
            flex: 7,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                FractionallySizedBox(
                  widthFactor: 0.55,
                  child: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 10),
                    child: TextField(),
                  ),
                ),
                const SizedBox(height: 15),
              ],
            ),
          ),
          Expanded(
            child: Column(
              children: const [
                Text('some text'),
                FractionallySizedBox(
                  widthFactor: 0.55,
                  child: ElevatedButton( // 推荐用ElevatedButton替代废弃的RaisedButton
                    child: Text('Hello'),
                    onPressed: () {}, // 补充按钮点击回调，避免警告
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  ),
);

• ConstrainedBox + MediaQuery：精准计算屏幕的可用高度，给Column设置最小高度约束，让Expanded能基于这个确定值计算flex占比。
• mainAxisSize: MainAxisSize.min：保证Column在内容高度不足屏幕时自适应，内容超出时则交给SingleChildScrollView处理滚动。
• 额外提一句：如果你用的是Flutter 2.0+版本，建议把RaisedButton换成ElevatedButton，前者已经被官方标记为废弃组件啦。

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