带有标签的Flutter SliverAppBar覆盖内容 _flutter

盛年不重来，一日难再晨，及时当勉励，岁月不待人。这篇文章主要讲述带有标签的Flutter SliverAppBar覆盖内容相关的知识，希望能为你提供帮助。
我已经按照本教程（https://medium.com/@diegoveloper/flutter-collapsing-toolbar-sliver-app-bar-14b858e87abe）来创建带有TabBar的CollapsingToolbar。
【带有标签的Flutter SliverAppBar覆盖内容】问题是，当我滚动正文时，内容会覆盖tabBar。
这里是代码：

@override Widget build(BuildContext context) { return Scaffold( body: DefaultTabController( length: 2, child: NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { return < Widget> [ SliverAppBar( expandedHeight: 200.0, floating: false, pinned: true, flexibleSpace: FlexibleSpaceBar( centerTitle: true, title: Text("Collapsing Toolbar", style: TextStyle( color: Colors.white, fontSize: 16.0, )), background: Image.network( "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress& cs=tinysrgb& h=350", fit: BoxFit.cover, )), ), SliverPersistentHeader( delegate: _SliverAppBarDelegate( TabBar( labelColor: Colors.black87, unselectedLabelColor: Colors.grey, tabs: [ Tab(icon: Icon(Icons.info), text: "Tab 1"), Tab(icon: Icon(Icons.lightbulb_outline), text: "Tab 2"), ], ), ), pinned: true, ), ]; }, body: Text("Sample text"), ), ), );

和代表：

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate { _SliverAppBarDelegate(this._tabBar); final TabBar _tabBar; @override double get minExtent => _tabBar.preferredSize.height; @override double get maxExtent => _tabBar.preferredSize.height; @override Widget build( BuildContext context, double shrinkOffset, bool overlapsContent) { return new Container( child: _tabBar, ); }@override bool shouldRebuild(_SliverAppBarDelegate oldDelegate) { return false; } }

对此有任何想法吗？
答案如果有人遇到相同的问题，我解决此问题的方法是使用：https://pub.dartlang.org/packages/extended_nested_scroll_view
示例：

class _MatchFragmentState extends State< MatchFragment> with TickerProviderStateMixin { TabController primaryTC; @override void initState() { primaryTC = new TabController(length: 3, vsync: this); super.initState(); }@override Widget build(BuildContext context) {final double statusBarHeight = MediaQuery.of(context).padding.top; //var tabBarHeight = primaryTabBar.preferredSize.height; var pinnedHeaderHeight = //statusBar height statusBarHeight + //pinned SliverAppBar height in header kToolbarHeight; return Scaffold( body: NestedScrollViewRefreshIndicator( onRefresh: onRefresh, child: ExtendedNestedScrollView( headerSliverBuilder: (c, f) { return < Widget> [ SliverAppBar( pinned: true, expandedHeight: kExpandedHeight, title: Text('Title'), flexibleSpace: FlexibleSpaceBar( background: Image.network( "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress& cs=tinysrgb& h=350", fit: BoxFit.cover, )) ), ) ]; }, pinnedHeaderSliverHeight: pinnedHeaderHeight, keepOnlyOneInnerNestedScrollPositionActive: true, body: Column( children: < Widget> [ TabBar( controller: primaryTC, labelColor: Colors.black87, unselectedLabelColor: Colors.grey, tabs: [ Tab(text: "Tab1"), Tab(text: "Tab2"), Tab(text: "Tab3"), ], ), Expanded( child: TabBarView( controller: primaryTC, children: < Widget> [ new Tab1Screen(), new Tab2Screen(), new Tab3Screen() ], ), ) ], ) ), ) ); } }Future< Null> onRefresh() { final Completer< Null> completer = new Completer< Null> (); new Timer(const Duration(seconds: 1), () { completer.complete(null); }); return completer.future.then((_) {}); }

另一答案一个简单的解决方案是为装饰头赋予装饰颜色
例如