SliverPersistentHeader组件 实现Flutter吸顶效果

时间:2025-01-30 21:39:12
import 'package:flutter/'; import 'package:flutter/'; class StickHeaderPage extends StatefulWidget { State<StatefulWidget> createState() { // TODO: implement createState return _StickHeaderPageState(); } } class _StickHeaderPageState extends State<StickHeaderPage> { Widget build(BuildContext context) { // TODO: implement build return Scaffold( appBar: AppBar( title: const Text("Sticky Header"), ), body: CustomScrollView( slivers: [ _topWidget(), _stickyHeader(), _listView(), ], physics: const BouncingScrollPhysics(), ), ); } Widget _topWidget() { return SliverToBoxAdapter( child: Container( child: Image.network("/escimg/g27/M04/5D/0B/f_900x675_0_q87_autohomecar__ChxkmWMVdMCAJZdZAAFU8OPC7Xs588.jpg", ), ), ); } Widget _stickyHeader() { return SliverPersistentHeader( pinned: true, floating: true, delegate: _StickyHeaderDelegate( minHeight: 50, maxHeight: 50, child: Container( height: 100, color: Colors.blue, alignment: Alignment.centerLeft, child: const Text("Sticky Header", style: TextStyle(fontSize: 20),), ), ), ); } Widget _listView() { return SliverList( delegate: SliverChildBuilderDelegate( (context, index) { return Container( height: 50, color: index % 2 == 0 ? Colors.white : Colors.black12, width: double.infinity, alignment: Alignment.center, child: Text("Item $index"), ); }, childCount: 50, ) ); } } class _StickyHeaderDelegate extends SliverPersistentHeaderDelegate { _StickyHeaderDelegate({ required this.minHeight, required this.maxHeight, required this.child, }); final double minHeight; final double maxHeight; final Widget child; Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) { // TODO: implement build return SizedBox.expand(child: child,); } // TODO: implement maxExtent double get maxExtent => maxHeight; // TODO: implement minExtent double get minExtent => minHeight; bool shouldRebuild(covariant _StickyHeaderDelegate oldDelegate) { // TODO: implement shouldRebuild return ( maxHeight != oldDelegate.maxHeight || minHeight != oldDelegate.minHeight || child != oldDelegate.child ); }