Flutter实现自定义形状Sliver AppBar：支持展开/折叠状态

核心实现逻辑 #

默认SliverAppBar的内置布局规则满足不了定制外形的要求，自定义外形的核心是把展开态、折叠态的所有展示元素全部接入滚动偏移量的联动逻辑，通过实时插值计算动态调整元素的位置、尺寸、透明度，实现两个状态的平滑过渡，全程不用受内置组件的布局规则限制。

分步实现要点 #

• 搭建滚动吸附基础
  用CustomScrollView作为页面的滚动容器，在sliver列表最顶部插入SliverPersistentHeader承载自定义AppBar，开启pinned: true属性实现滚动到阈值后自动吸附的折叠效果，提前定义两个关键高度值：
  • 展开态总高度：对应参考效果图里AppBar完全展开时的实际像素高度
  • 折叠态固定高度：对应AppBar吸附后固定在顶部的导航栏高度
    基础结构代码参考：

  CustomScrollView(
    slivers: [
      // 自定义AppBar承载组件
      SliverPersistentHeader(
        pinned: true,
        delegate: CustomAppBarDelegate(
          expandedHeight: 240,
          collapsedHeight: 64,
        ),
      ),
      // 页面其他滚动列表内容
      SliverList(
        delegate: SliverChildBuilderDelegate(
          (context, index) => ListTile(title: Text("列表项$index")),
          childCount: 20,
        ),
      )
    ],
  )
  

• 实现双状态的样式联动
  自定义的CustomAppBarDelegate需要继承SliverPersistentHeaderDelegate，重写build方法时可以拿到当前滚动进度t：值为0时是完全展开状态，值为1时是完全折叠状态，所有元素的样式都基于t做线性插值计算：
  • 展开态专属元素（大尺寸头像、横幅图、大标题、横向分类标签）：随t值增大，从原本的展开位置向上平移，透明度从1线性降到0，直到完全折叠时从视图中隐藏
  • 折叠态专属元素（返回按钮、居中的小导航标题、右侧操作按钮）：随t值增大，从原本的靠下位置向上平移到导航栏固定位置，透明度从0线性升到1，直到完全折叠时完全显示
• 定制化外形调整
  完全不受内置AppBar的布局限制，可以自由往组件树里添加需要的自定义元素：比如展开态的渐变背景、自定义搜索框、轮播banner，折叠态的毛玻璃模糊效果、自定义菜单按钮，所有元素的圆角、边距、字重、字号都可以跟随滚动进度做插值调整，完全匹配设计稿的外形要求。

常见踩坑点 #

• 折叠态高度要叠加系统状态栏高度，通过MediaQuery.of(context).padding.top获取状态栏高度做适配，避免导航栏内容和系统状态栏重叠
• 不要给两个状态的元素写死固定位置，一定要绑定滚动进度做插值过渡，否则滚动过程中会出现元素生硬跳变的问题
• 如果需要实现滚动到折叠阈值时的背景色过渡效果，可以给AppBar外层容器的背景色设置透明度插值，从展开态的半透明渐变色，平滑过渡到折叠态的不透明纯色

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