Flutter技术求助：遇到Cannot hit test a render box that has never been laid out报错

我来帮你拆解这个问题——你遇到的这个布局错误其实是Flutter布局系统里很典型的“空间冲突”问题，咱们一步步理清楚：

首先，错误的核心根源：你把Expanded放在了SingleChildScrollView内部的Column里了。Expanded的作用是抢占父容器的剩余可用空间，但它有个硬性要求：父容器必须有确定的、非无限的高度。而SingleChildScrollView的特性是允许子内容无限滚动，它本身不会给子组件提供固定的可用空间，这就导致Expanded根本没法计算自己该占多大面积，最终布局失败，连带着触发了hitTest的报错——毕竟连布局都没完成，自然没法处理点击事件。

你之前加了Expanded但没解决问题，就是因为没找对父容器的矛盾点。下面给你两种针对性的解决方案：

方案一：不需要滚动内部内容时，移除SingleChildScrollView #

如果你的内部内容不需要滚动，直接把SingleChildScrollView去掉，让外层的Column来承载Expanded：

Scaffold(
  body: SafeArea(
    child: Column(
      children: [
        // .. 你的其他代码
        Padding(
          padding: EdgeInsets.symmetric(vertical: 10.0),
          child: Column(
            children: [
              // .. 你的其他代码
              Column(
                children: [
                  Expanded(
                    child: Container(
                      padding: EdgeInsets.all(10),
                      color: Colors.red,
                      child: Text("test A")
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.all(10),
                    color: Colors.yellow,
                    child: Text("test b"),
                  ),
                ],
              )
            ],
          ),
        )
      ],
    ),
  ),
);

这样外层的Column在SafeArea里拥有确定的高度（屏幕可用高度），Expanded就能正常拉伸占据剩余空间了。

方案二：需要滚动内部内容时，替换Expanded为自适应方案 #

如果你的内容确实需要滚动，那不能用Expanded，可以选择以下两种方式：

1. 给红色Container设置固定高度：

Scaffold(
  body: SafeArea(
    child: Column(
      children: [
        // .. 你的其他代码
        Padding(
          padding: EdgeInsets.symmetric(vertical: 10.0),
          child: SingleChildScrollView(
            child: Column(
              children: [
                // .. 你的其他代码
                Column(
                  children: [
                    Container(
                      height: 200, // 设置固定高度
                      padding: EdgeInsets.all(10),
                      color: Colors.red,
                      child: Text("test A")
                    ),
                    Container(
                      padding: EdgeInsets.all(10),
                      color: Colors.yellow,
                      child: Text("test b"),
                    ),
                  ],
                )
              ],
            ),
          ),
        )
      ],
    ),
  ),
);

2. 用Flexible配合fit: FlexFit.loose（它不会强制抢占空间，而是根据子内容高度自适应）：

Scaffold(
  body: SafeArea(
    child: Column(
      children: [
        // .. 你的其他代码
        Padding(
          padding: EdgeInsets.symmetric(vertical: 10.0),
          child: SingleChildScrollView(
            child: Column(
              children: [
                // .. 你的其他代码
                Column(
                  children: [
                    Flexible(
                      fit: FlexFit.loose,
                      child: Container(
                        padding: EdgeInsets.all(10),
                        color: Colors.red,
                        child: Text("test A")
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.all(10),
                      color: Colors.yellow,
                      child: Text("test b"),
                    ),
                  ],
                )
              ],
            ),
          ),
        )
      ],
    ),
  ),
);

如果你的需求是“滚动区域里有一个组件能占据剩余滚动空间”，还可以考虑用CustomScrollView结合SliverFillRemaining，不过这个场景相对复杂，需要的话可以再补充细节。

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