Closed Dabbit-Chan closed 1 year ago
我想让黄色pinWidget和底下的list一起往下,但是只有list往下了,pinWidget还在顶上,结果就是refresh的header会在pinWidget上出现。
import 'package:easy_refresh/easy_refresh.dart'; import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({super.key, required this.title}); final String title; @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> with AutomaticKeepAliveClientMixin { final SliverOverlapAbsorberHandle handle1 = SliverOverlapAbsorberHandle(); final SliverOverlapAbsorberHandle handle2 = SliverOverlapAbsorberHandle(); final SliverOverlapAbsorberHandle handle3 = SliverOverlapAbsorberHandle(); @override bool get wantKeepAlive => true; @override Widget build(BuildContext context) { super.build(context); return DefaultTabController( length: 2, child: Scaffold( appBar: AppBar( title: Text(widget.title), ), body: NestedScrollView( // pinnedHeaderSliverHeightBuilder: () => 60, // onlyOneScrollInBody: true, headerSliverBuilder: (context, innerBoxIsScrolled) { return [ SliverToBoxAdapter(child: _headerCard()), _pinWidget(Colors.orange, 60), ]; }, body: TabBarView( children: [ EasyRefresh.builder( onRefresh: () {}, childBuilder: (context, physics) { return CustomScrollView( physics: physics, slivers: [ _pinWidget(Colors.yellow, 30), SliverFixedExtentList( itemExtent: 50, delegate: SliverChildBuilderDelegate( (context, index) { return ListTile(title: Text('$index')); }, childCount: 30, ), ), ], ); }, ), EasyRefresh.builder( onRefresh: () {}, childBuilder: (context, physics) { return CustomScrollView( physics: physics, slivers: [ _pinWidget(Colors.green, 30), SliverFixedExtentList( itemExtent: 50, delegate: SliverChildBuilderDelegate( (context, index) { return ListTile(title: Text('-$index')); }, childCount: 30, ), ), ], ); }, ), ], ), ), // This trailing comma makes auto-formatting nicer for build methods. ), ); } Widget _headerCard() { return Container(height: 100, color: Colors.red); } Widget _pinWidget(Color color, double height) { return SliverPersistentHeader( pinned: true, delegate: SliverHeaderDelegate.fixedHeight(height: height, child: Container(color: color)), ); } } typedef SliverHeaderBuilder = Widget Function( BuildContext context, double shrinkOffset, bool overlapsContent); class SliverHeaderDelegate extends SliverPersistentHeaderDelegate { SliverHeaderDelegate({ required this.maxHeight, this.minHeight = 0, required Widget child, }) : builder = ((a, b, c) => child), assert(minHeight <= maxHeight && minHeight >= 0); SliverHeaderDelegate.fixedHeight({ required double height, required Widget child, }) : builder = ((a, b, c) => child), maxHeight = height, minHeight = height; SliverHeaderDelegate.builder({ required this.maxHeight, this.minHeight = 0, required this.builder, }); final double maxHeight; final double minHeight; final SliverHeaderBuilder builder; @override Widget build( BuildContext context, double shrinkOffset, bool overlapsContent, ) { Widget child = builder(context, shrinkOffset, overlapsContent); return SizedBox.expand(child: child); } @override double get maxExtent => maxHeight; @override double get minExtent => minHeight; @override bool shouldRebuild(SliverHeaderDelegate oldDelegate) { return oldDelegate.maxExtent != maxExtent || oldDelegate.minExtent != minExtent; } }
使用HeaderLocator,可以参考示例或者文档注释
我想让黄色pinWidget和底下的list一起往下,但是只有list往下了,pinWidget还在顶上,结果就是refresh的header会在pinWidget上出现。