Flutter笔记--SliverFloatingHeader

Flutter开发中，SliverFloatingHeader是专门用于简化浮动头部的实现,它的作用是响应用户的滚动方向来控制头部组件的显示与隐藏，简单总结如下:

API:
FloatingHeaderSnapMode.overlay:当向下滑动触发头部展开时，头部会像浮层一样直接覆盖在列表内容的上方。
FloatingHeaderSnapMode.scroll:适合不需要改变列表滚动位置的悬浮组件。例如，应用首页的搜索栏或悬浮操作按钮。
场景:
1 应用首页搜索栏
2 新闻应用标题栏
栗子:

class Demo extends StatelessWidget { const Demo ({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: const Text("浮动卡片区域")), body: CustomScrollView( slivers: [ SliverFloatingHeader( animationStyle: AnimationStyle( duration: const Duration(milliseconds: 220), curve: Curves.easeOut, ), snapMode: FloatingHeaderSnapMode.overlay, child: Container( margin: const EdgeInsets.all(12), padding: const EdgeInsets.all(16), decoration: BoxDecoration( color: Colors.blueAccent.shade100, borderRadius: BorderRadius.circular(10), ), child: const Text( "浮动展示卡片：拖动滚动会触发吸附动画", style: TextStyle(fontSize: 16), ), ), ), SliverList( delegate: SliverChildBuilderDelegate( (context, index) => ListTile( leading: const Icon(Icons.inventory_2), title: Text("商品条目 ${index + 1}"), subtitle: Text("条目详情描述 ${index + 1}"), ), childCount: 35, ), ), ], ), ), ); } }

class StickyHeaderDelegate extends SliverPersistentHeaderDelegate { final Widget content; final double height; StickyHeaderDelegate({required this.content, required this.height}); @override Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) => content; @override double get maxExtent => height; @override double get minExtent => height; @override bool shouldRebuild(covariant StickyHeaderDelegate oldDelegate) => oldDelegate.content != content; } class TestDemo extends StatelessWidget { const TestDemo ({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: const Text("多模块滚动布局")), body: CustomScrollView( slivers: [ SliverToBoxAdapter( child: Container( height: 130, width: double.infinity, color: Colors.orangeAccent, alignment: Alignment.center, child: const Text("首页活动横幅", style: TextStyle(fontSize: 22, color: Colors.white)), ), ), // 浮动公告卡片 SliverFloatingHeader( animationStyle: AnimationStyle( duration: const Duration(milliseconds: 280), curve: Curves.easeInOutCubic, ), snapMode: FloatingHeaderSnapMode.scroll, child: Container( margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), padding: const EdgeInsets.all(14), decoration: BoxDecoration( color: Colors.indigo.shade50, borderRadius: BorderRadius.circular(8), ), child: const Text("限时公告：全场数码商品满减活动开启"), ), ), // 第一层常驻吸顶栏 SliverPersistentHeader( pinned: true, delegate: StickyHeaderDelegate( height: 46, content: Container( color: Colors.teal, alignment: Alignment.centerLeft, padding: const EdgeInsets.only(left: 16), child: const Text("一级分类：数码专区", style: TextStyle(color: Colors.white)), ), ), ), SliverPersistentHeader( pinned: true, delegate: StickyHeaderDelegate( height: 42, content: Container( color: Colors.green.shade400, alignment: Alignment.centerLeft, padding: const EdgeInsets.only(left: 16), child: const Text("二级分类：手机配件", style: TextStyle(color: Colors.white)), ), ), ), SliverList( delegate: SliverChildBuilderDelegate( (context, index) => ListTile( title: Text("数码单品 ${index + 1}"), trailing: Text("¥${99 + index * 20}"), ), childCount: 50, ), ), ], ), ), ); } }

注意:
1 必须配合CustomScrollView
2 避免嵌套滚动视图 确保所有的Sliver组件都在同一个CustomScrollView中，避免嵌套多个滚动视图导致滚动冲突问题。