Flutter布局报错：实现类似Facebook Feed滚动布局遇渲染问题

我要做一个类似Facebook Feed的界面：顶部是横向滚动的ListView（故事栏），下方是全屏纵向滚动的ListView，且纵向滚动时隐藏顶部列表。编写的代码如下：

Stack(
              children: [
                SingleChildScrollView(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      SizedBox(
                        height: 100.0,
                        child: ListView.builder(
                          shrinkWrap: true,
                          scrollDirection: Axis.horizontal,
                          itemCount: snapshot.data!.docs.length,
                          itemBuilder: (context, index) => PostCard(
                            snap: snapshot.data!.docs[index].data(),
                          ),
                        ),
                      ),
                      Text(
                        'Demo Headline 2',
                        style: TextStyle(fontSize: 18),
                      ),
                      ListView.builder(
                        itemCount: snapshot.data!.docs.length,
                        itemBuilder: (context, index) => PostCard(
                          snap: snapshot.data!.docs[index].data(),
                        ),
                      ),
                    ],
                  ),
                ),
                Align(
                  alignment: Alignment.bottomRight,
                  child: Padding(
                    padding: const EdgeInsets.only(bottom: 80, right: 10),
                    child: FloatingActionButton(
                      elevation: 100,
                      onPressed: () {
                        Navigator.pushNamed(context, '/add');
                      },
                      child: const Icon(
                        Icons.add,
                        size: 32,
                        color: Colors.amber,
                      ),
                      backgroundColor: Colors.black,
                    ),
                  ),
                ),
              ],
            );

运行代码时触发渲染库异常：

Exception caught by rendering library
RenderBox was not laid out: RenderRepaintBoundary#90e8f relayoutBoundary=up16 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
package:flutter/…/rendering/box.dart:1
Failed assertion: line 2001 pos 12: 'hasSize'

问题原因及修复方案 #

核心问题 #

1. 第二个ListView.builder未设置尺寸约束，嵌套在SingleChildScrollView中会引发无限高度冲突，这是触发异常的直接原因。
2. 原结构无法实现滚动时隐藏顶部栏的需求，需要用专门的嵌套滚动组件处理联动逻辑。

修复步骤 #

用NestedScrollView替代原有嵌套结构，它能同时解决滚动冲突和头部隐藏需求：

• 顶部横向列表放在SliverAppBar的flexibleSpace中，通过滚动控制自动隐藏
• 下方纵向列表直接作为NestedScrollView的body，避免嵌套滚动冲突
• 用SliverToBoxAdapter将普通文本组件转换为Sliver类型，适配NestedScrollView的结构

完整修复代码 #

Stack(
  children: [
    NestedScrollView(
      headerSliverBuilder: (context, innerBoxIsScrolled) {
        return [
          SliverAppBar(
            pinned: false, // 滚动时完全隐藏顶部栏
            floating: false,
            expandedHeight: 100.0,
            backgroundColor: Colors.white, // 根据需求设置背景色
            flexibleSpace: FlexibleSpaceBar(
              background: SizedBox(
                height: 100.0,
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: snapshot.data!.docs.length,
                  itemBuilder: (context, index) => PostCard(
                    snap: snapshot.data!.docs[index].data(),
                  ),
                ),
              ),
            ),
          ),
          SliverToBoxAdapter(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
              child: Text(
                'Demo Headline 2',
                style: TextStyle(fontSize: 18),
              ),
            ),
          ),
        ];
      },
      body: ListView.builder(
        itemCount: snapshot.data!.docs.length,
        itemBuilder: (context, index) => PostCard(
          snap: snapshot.data!.docs[index].data(),
        ),
      ),
    ),
    Align(
      alignment: Alignment.bottomRight,
      child: Padding(
        padding: const EdgeInsets.only(bottom: 80, right: 10),
        child: FloatingActionButton(
          elevation: 100,
          onPressed: () {
            Navigator.pushNamed(context, '/add');
          },
          child: const Icon(
            Icons.add,
            size: 32,
            color: Colors.amber,
          ),
          backgroundColor: Colors.black,
        ),
      ),
    ),
  ],
);

额外优化提示 #

• 如果需要滚动时保留顶部栏的一部分（比如导航栏），可以将SliverAppBar的pinned设为true，并调整expandedHeight
• 横向列表不需要shrinkWrap: true，因为已经被SizedBox约束了高度，移除后能提升性能
• 可根据需求调整SliverAppBar的背景色、阴影等属性，匹配App的设计风格

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