用SingleChildScrollView包裹Scaffold出现无限布局尺寸错误求解决方案

错误原因 #

Scaffold默认会占满父组件的可用空间，但SingleChildScrollView会为子组件提供无限的滚动空间，两者嵌套后，Scaffold无法确定自身的尺寸范围，从而触发RenderPhysicalModel object was given an infinite size during layout错误。

正确解决方案 #

方案1：仅滚动Scaffold的body内容（推荐） #

不要用SingleChildScrollView包裹整个Scaffold，而是把需要滚动的内容放在Scaffold的body中，用SingleChildScrollView包裹body内部的长内容：

Scaffold(
  appBar: AppBar(
    title: Text("页面标题"),
  ),
  body: SingleChildScrollView(
    child: Column(
      children: [
        // 这里放置你的长列表、多行文本等需要滚动的内容
        Container(height: 200, color: Colors.red),
        Container(height: 200, color: Colors.green),
        Container(height: 200, color: Colors.blue),
        // ...更多内容
      ],
    ),
  ),
)

方案2：让整个Scaffold可滚动（特殊场景） #

如果需要连AppBar一起滚动，可通过ConstrainedBox给Scaffold设置最小高度约束，确保它能基于屏幕尺寸确定基础大小：

SingleChildScrollView(
  child: ConstrainedBox(
    constraints: BoxConstraints(
      minHeight: MediaQuery.of(context).size.height,
    ),
    child: Scaffold(
      appBar: AppBar(title: Text("可滚动的整个页面")),
      body: Column(
        children: [
          // 你的页面内容
        ],
      ),
    ),
  ),
)

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