Flutter：如何用SingleChildScrollView正确包裹ListView与Row组件？

你遇到的"Cannot hit test a render box that has never been laid out."错误，本质是可滚动组件之间的约束冲突：SingleChildScrollView会提供无限垂直空间，而ListView.builder默认会试图占据尽可能多的垂直空间，两者嵌套后布局系统无法确定组件的实际大小，从而报错。

根据不同的布局需求，给出两种可行的解决方案：

场景1：列表与Row一起滚动（整体可滚动） #

如果需要列表内容和底部Row随页面一起滚动，推荐用CustomScrollView搭配sliver组件，既保留ListView.builder的懒加载特性，又能正确布局固定的Row：

Scaffold(
  resizeToAvoidBottomInset: true,
  body: CustomScrollView(
    slivers: [
      // 替代原ListView.builder的SliverList
      SliverList(
        delegate: SliverChildBuilderDelegate(
          (context, index) => ListTile(title: Text('列表项 $index')),
          childCount: 50, // 替换为你的实际条目数量
        ),
      ),
      // 用SliverToBoxAdapter包裹Row，将其转为sliver组件
      SliverToBoxAdapter(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
          child: Row(
            children: const [
              Expanded(child: Text('第一列文本内容')),
              Expanded(child: Text('第二列文本内容')),
            ],
          ),
        ),
      ),
    ],
  ),
);

场景2：Row固定在底部（仅列表滚动） #

如果需要Row固定在页面底部，不随列表滚动移动，直接用Column+Expanded组合即可，resizeToAvoidBottomInset: true会自动处理键盘弹出时的布局上移：

Scaffold(
  resizeToAvoidBottomInset: true,
  body: Column(
    children: [
      // Expanded让ListView.builder占据除Row外的所有剩余空间
      Expanded(
        child: ListView.builder(
          itemCount: 50,
          itemBuilder: (context, index) => ListTile(title: Text('列表项 $index')),
        ),
      ),
      // 底部固定的Row
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        child: Row(
          children: const [
            Expanded(child: Text('第一列文本内容')),
            Expanded(child: Text('第二列文本内容')),
          ],
        ),
      ),
    ],
  ),
);

如果底部Row需要避免被键盘遮挡，可以进一步将Row放到Scaffold的bottomSheet属性中：

Scaffold(
  resizeToAvoidBottomInset: true,
  body: ListView.builder(
    itemCount: 50,
    itemBuilder: (context, index) => ListTile(title: Text('列表项 $index')),
  ),
  bottomSheet: Padding(
    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
    child: Row(
      children: const [
        Expanded(child: Text('第一列文本内容')),
        Expanded(child: Text('第二列文本内容')),
      ],
    ),
  ),
);

为什么之前的方法无效 #

• 直接用SingleChildScrollView包裹Column+ListView.builder：SingleChildScrollView无固定高度约束，ListView.builder无法确定自身大小，导致布局失败。
• 在SingleChildScrollView内用Expanded：Expanded依赖父组件的可用空间约束，但SingleChildScrollView提供的是无限空间，因此Expanded无法生效。

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