Flutter SliverAppBar滚动时flexibleSpace溢出问题求解

问题核心是你使用了OverflowBox强制内容超出SliverAppBar的边界，导致内容覆盖到下方的ListView。要实现滚动推动效果同时避免溢出，只需要移除OverflowBox并正确计算布局高度即可：

修改步骤及代码 #

1. 移除OverflowBox：它是导致内容溢出的直接原因，SliverAppBar的flexibleSpace本身支持滚动时的收缩/展开行为，不需要额外的溢出容器。
2. 修正高度计算：将expandedHeight调整为flexibleSpace内部内容的实际高度，把TabBar的高度交给SliverAppBar的bottom属性单独处理，避免内容与TabBar重叠。
3. 调整内边距：移除flexibleSpace底部内边距中包含的TabBar高度，确保内容不会延伸到TabBar下方。

修改后的完整代码：

@override
Widget build(BuildContext context) {
  // 提取常量便于维护和计算
  const double tabBarHeight = 43;
  const double featuredContainerHeight = 117;
  const double verticalGap = 16;
  const double contentBottomPadding = 16;
  const double textHeight = 20; // 预估Text组件的高度，可根据实际字体调整

  return DefaultTabController(
    length: 6,
    child: NestedScrollView(
      headerSliverBuilder: (context, innerBoxIsScrolled) {
        return [
          SliverAppBar(
            leading: const SizedBox(),
            // 计算flexibleSpace展开时的总高度：文本高度 + 垂直间距 + 容器高度 + 底部内边距
            expandedHeight: textHeight + verticalGap + featuredContainerHeight + contentBottomPadding,
            floating: true,
            pinned: true,
            surfaceTintColor: Colors.transparent,
            // 直接使用AutoLayout作为flexibleSpace，无需OverflowBox
            flexibleSpace: AutoLayout(
              padding: const EdgeInsets.symmetric(horizontal: 16).copyWith(bottom: contentBottomPadding),
              verticalGap: verticalGap,
              children: [
                const Text("Featured"),
                Container(
                  height: featuredContainerHeight,
                  width: double.infinity,
                  decoration: ShapeDecoration(
                    color: Colors.blue[300],
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(16),
                    ),
                  ),
                ),
              ],
            ),
            bottom: const SelectionTray(
              height: tabBarHeight,
              tabs: ["TAB", "TAB", "TAB", "TAB", "TAB", "TAB"],
            ),
          ),
        ];
      },
      body: ListView.builder(
        padding: const EdgeInsets.only(top: 16, left: 16, right: 16),
        itemCount: 12,
        itemBuilder: (context, index) {
          return Container(
            height: 76,
            padding: const EdgeInsets.all(12),
            margin: const EdgeInsets.only(bottom: 8.0),
            clipBehavior: Clip.antiAlias,
            decoration: BoxDecoration(
              color: Colors.grey[300],
              borderRadius: BorderRadius.circular(16),
            ),
          );
        },
      ),
    ),
  );
}

原理说明 #

• SliverAppBar的expandedHeight定义了flexibleSpace展开时的高度，移除OverflowBox后，flexibleSpace的内容会被严格限制在这个高度范围内，不会溢出到父容器外。
• TabBar通过bottom属性挂载在SliverAppBar下方，系统会自动处理它与flexibleSpace的布局关系，避免内容重叠。
• 滚动时，SliverAppBar会自动收缩flexibleSpace的高度，实现你需要的"推动"效果，同时保持内容在合法布局范围内。

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