Flutter中用SingleChildScrollView包裹Center引发布局异常求助

你遇到的这个问题，核心原因是SingleChildScrollView在其滚动方向（默认垂直）上会为子组件提供无限的可用空间，而Center组件的布局逻辑依赖父组件的约束范围来确定居中位置。当Center拿到无限空间时，它无法计算自身的尺寸，就会触发RenderPositionedBox object was given an infinite size during layout异常，最终导致页面白屏。

下面给你几种针对性的解决方案，结合你的代码来调整：

方案1：移除Center组件，直接使用Stack作为子组件 #

你的布局里用了Positioned来定位元素，其实不需要Center来包裹——Stack本身可以独立作为SingleChildScrollView的子组件。修改后的body代码如下：

body: SingleChildScrollView(
  child: Stack(
    children: <Widget>[
      Positioned(
        top: _tailleWidth.height / 35,
        right: _tailleWidth.width / 2.9,
        child: Container(
          height: _tailleWidth.height / 5.0,
          width: _tailleWidth.width / 4.0,
          decoration: BoxDecoration(
            image: DecorationImage(
              fit: BoxFit.fill,
              image: AssetImage('images/4.jpg'))))),
    ],
  ),
),

如果希望Stack占满屏幕宽度，可以给它套一个SizedBox来约束尺寸：

body: SingleChildScrollView(
  child: SizedBox(
    width: double.infinity,
    child: Stack(
      children: <Widget>[
        // 你的Positioned组件
      ],
    ),
  ),
),

方案2：给Center添加明确的尺寸约束 #

如果你确实需要保留Center组件，必须给它加上固定的布局约束，让它知道自己的最大可用空间。比如用ConstrainedBox包裹：

body: SingleChildScrollView(
  child: ConstrainedBox(
    constraints: BoxConstraints(
      minHeight: MediaQuery.of(context).size.height - kToolbarHeight,
      maxWidth: MediaQuery.of(context).size.width,
    ),
    child: Center(
      child: Stack(
        children: <Widget>[
          // 你的Positioned组件
        ],
      ),
    ),
  ),
),

这里用minHeight确保内容至少占满除去AppBar后的屏幕高度，maxWidth限制宽度为屏幕宽度，这样Center就有了明确的布局边界，不会再出现无限尺寸的问题。

额外优化：用Align替代Stack+Positioned简化布局 #

你的Stack里只有一个Positioned组件，其实可以用Align配合Padding来实现相同的定位效果，布局更简洁稳定：

body: SingleChildScrollView(
  child: Align(
    alignment: Alignment.topRight,
    child: Padding(
      padding: EdgeInsets.only(
        top: _tailleWidth.height / 35,
        right: _tailleWidth.width / 2.9,
      ),
      child: Container(
        height: _tailleWidth.height / 5.0,
        width: _tailleWidth.width / 4.0,
        decoration: BoxDecoration(
          image: DecorationImage(
            fit: BoxFit.fill,
            image: AssetImage('images/4.jpg')))),
    ),
  ),
),

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