如何修复Flutter中RenderBox未布局的hasSize断言错误？

错误原因 #

出现RenderBox was not laid out错误的核心原因是：SingleChildScrollView内部的Column中嵌套了Expanded组件。SingleChildScrollView属于无固定高度的滚动容器，而Expanded会强制子组件占据父容器的剩余空间——但此时父容器（嵌套在滚动容器内的Column）没有确定的高度约束，导致子组件（GridView）无法计算自身尺寸，触发了hasSize断言失败。

修复步骤 #

直接移除GridView外层的Expanded组件，保留已设置的shrinkWrap: true属性，让GridView根据自身内容自动计算高度，适配SingleChildScrollView的滚动布局逻辑。

修改后的代码片段 #

body: SafeArea(
  child: SingleChildScrollView(
    physics: const BouncingScrollPhysics(),
    child: Container(
      decoration: BoxDecoration(
          gradient: LinearGradient(colors: [
            hexStringToColor("FFBEC8"),
            hexStringToColor("fe98a8"),
            hexStringToColor("FC98A7"),
            hexStringToColor("#FF8799")
          ], begin: Alignment.topCenter, end: Alignment.bottomCenter)),
      child: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            Container(
              height: 64,
              margin: EdgeInsets.only(bottom: 20),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  CircleAvatar(
                    radius: 29,
                    backgroundImage: AssetImage('assets/logo.png'),
                  ),
                  SizedBox(width: 16),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        "$name",
                        style: TextStyle(
                            fontFamily: "Montserrat Medium",
                            color: Colors.white,
                            fontSize: 20),
                      ),
                    ],
                  )
                ],
              ),
            ),
            // 移除外层的Expanded组件
            GridView.count(
              shrinkWrap: true,
              mainAxisSpacing: 10,
              crossAxisSpacing: 10,
              primary: false,
              crossAxisCount: 2,
              children: <Widget>[
                Card(
                  color: Colors.grey.shade100,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8)),
                  elevation: 4,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      GestureDetector(
                        onTap: () => Navigator.of(context).push(PageTransition(
                            child: PDFScreen(pathPDF: 'assets/arbo'),
                            type: PageTransitionType.fade)),
                        child: SvgPicture.asset(
                          'assets/moon.svg',
                          height: 120,
                        ),
                      ),
                      Text(
                        'Arbo-lijst',
                        style: cardTextStyle,
                      )
                    ],
                  ),
                ),
                // 其余Grid子组件...
              ],
            ),
          ],
        ),
      ),
    ),
  ),
),

补充说明 #

• shrinkWrap: true属性会让GridView仅占用自身内容所需的高度，而非强制填充父容器空间，适配滚动容器的布局逻辑。
• 在嵌套滚动组件时，禁止在SingleChildScrollView、ListView这类无固定尺寸的容器内使用Expanded或Flexible，这类组件依赖父容器的确定尺寸约束，滚动容器无法提供该约束。

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