当前位置：首页 > news >正文

SliverPersistentHeader组件实现Flutter吸顶效果

news 2025/7/26 9:48:50

效果：

20230723-212152-73_Trim

代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';class StickHeaderPage extends StatefulWidget {@overrideState<StatefulWidget> createState() {// TODO: implement createStatereturn _StickHeaderPageState();}}class _StickHeaderPageState extends State<StickHeaderPage> {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn 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("https://2sc2.autoimg.cn/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;@overrideWidget build(BuildContext context, double shrinkOffset, bool overlapsContent) {// TODO: implement buildreturn SizedBox.expand(child: child,);}@override// TODO: implement maxExtentdouble get maxExtent => maxHeight;@override// TODO: implement minExtentdouble get minExtent => minHeight;@overridebool shouldRebuild(covariant _StickyHeaderDelegate oldDelegate) {// TODO: implement shouldRebuildreturn (maxHeight != oldDelegate.maxHeight ||minHeight != oldDelegate.minHeight ||child != oldDelegate.child);}