flutter SliverPersistentHeader子组件透明度渐变【滑动悬停appbar添加自定义组件的透明度】
在开发flutter悬停头部中，发现一个问题。
我们通常使用SliverAppBar(),去实现悬停的功能，在使用appbar的时候满足不了我们的需求，就需要自定义，
如下：在title中写了一个搜索框的功能，但是我发现在上滑隐藏的时候，icon有渐变效果，包括普通的text都有渐变的效果，像我写的TextField则没有这种效果。
也就是浅入浅出的效果。如图：
return NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { return <Widget>[ SliverAppBar(
//这是自定义的头部布局 title: Container( child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Expanded( child: Icon( Iconfont.zhiboicon, ), flex: 0, ), Expanded( child: Container( margin: EdgeInsets.fromLTRB(10, 0, 10, 0), child: TextField( style: TextStyle( fontSize: 13, color: ColorKit.hexToColor('#979797')), decoration: InputDecoration( contentPadding: EdgeInsets.all(5), isCollapsed: true, prefixIcon: Container( margin: EdgeInsets.fromLTRB(10, 0, 5, 0), child: Icon( Iconfont.sousuoicon, size: 15, color: ColorKit.hexToColor('#999999'), ), ), //添加内部左边图标 prefixIconConstraints: BoxConstraints(), fillColor: ColorKit.hexToColor('#F6F6F6'), filled: true, hintText: '请输入搜索内容', hintStyle: TextStyle(fontSize: 13), border: OutlineInputBorder( borderRadius: BorderRadius.circular(20), borderSide: BorderSide.none, ), ), onChanged: (text) { print('onchanged+$text'); }, onSubmitted: (text) { print('onSubmitted+$text'); }, ), ), flex: 1, ), Expanded( child: Icon( Iconfont.addicon, color: Colors.blue, ), flex: 0, ), ], ), ), pinned: true, floating: true, forceElevated: innerBoxIsScrolled, bottom: PreferredSize( preferredSize: Size(double.infinity, 48), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Expanded( flex: 1, child: Container( // height: 48, child: TabBar( indicatorSize: TabBarIndicatorSize.label, isScrollable: true, controller: _tabController, tabs: _tabbarTitile.map((e) { return Tab( text: e, ); }).toList(), ), )), Expanded( flex: 0, child: Container( margin: EdgeInsets.fromLTRB(10, 0, 10, 0), child: Icon(Iconfont.gengduoicon), )) ], ), ), ), ]; }, body: TabBarView( controller: _tabController, //tabbar控制器 children: _tabbarView, ), );
作为一个flutter都小白，每次遇到问题都喜欢网上找现成的，但是flutter都文章少的可怜。
后来还是下定决定自己研究一下，看了很多文章，这个方法可行，就是单独把头部的布局拿出来用SliverPersistentHeader来实现。
关于SliverPersistentHeader的介绍请看这里：没错是我，点我
“控件当滚动到边缘时根据滚动的距离缩小高度，有点类似 SliverAppBar 的背景效果”
我写的自定义SliverPersistentHeaderDelegate。如果你也是小白，看到这里不是很明白。别担心，我会把整个代码和使用方法写上来的。
上代码：
自己写一个类，然后继承SliverPersistentHeaderDelegate。
写几个常用的入参，比如我写的是传入的child，也就是传入的小部件，这里用PreferredSize，为什么用这个呢，因为这个组件高度是固定的，也就是自己去设置内容的高度。在maxExtent和minExtent中需要获取这个高度。必须是固定高度（我经过好多天研究出来的，可能是知识范围有限，如果有问题，可以帮我指出改正）。
第二个是islucency,是布尔类型，在外部传入是否滚动时淡入淡出。不知道为啥就写上了，可能是习惯，为了以后有不用这个功能的时候。
第三个是背景颜色。这里单独传入一个背景色。有两种原因，一种是如果直接在child中定义背景色，那么淡入淡出的时候，背景也会虚化。另外一种就是在入参中添加backgroundColor，背景不会虚化，虚化的是内容的小部件，大家也可以看到下面Opacity是嵌套在Container中的。不传参数默认白色，当然这个属性也不会影响小部件自己设置背景色。
import 'dart:math' as math; import 'package:flutter/material.dart'; class CommonSliverHeaderDelegate extends SliverPersistentHeaderDelegate{ PreferredSize child;//传入preferredsize组件，因为此组件需要固定高度 bool islucency;//入参 是否更加滑动变化透明度，true，false Color backgroundColor;//需要设置的背景色 CommonSliverHeaderDelegate({@required this.islucency,@required this.child,this.backgroundColor}); @override Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) { double mainHeight = maxExtent - shrinkOffset;//动态获取滑动剩余高度 return Container( color: backgroundColor??Colors.white, child: Opacity( opacity:islucency==true&&mainHeight!=maxExtent?((mainHeight / maxExtent)*0.5).clamp(0, 1):1,//根据滑动高度隐藏显示 child: child ), ); } @override // TODO: implement maxExtent double get maxExtent => this.child.preferredSize.height; @override // TODO: implement minExtent double get minExtent => this.child.preferredSize.height; @override bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) { // TODO: implement shouldRebuild return true; } }
好，具体的使用：
代码可能有点乱，大家看重点就行。
首先是NestedScrollView组件，然后就直接添加SliverPersistentHeader组件，在组件中的delegate属性中加入咱们自定义的组件CommonSliverHeaderDelegate。
return SafeArea( child: NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { return <Widget>[ SliverPersistentHeader( delegate: CommonSliverHeaderDelegate( islucency: true,//需要淡入淡出 child:PreferredSize(//这里传入PreferredSize组件，必须是这个，因为咱们自定义中接收到就是这个。 preferredSize: Size.fromHeight(60),//定义组件高度，必须写。 child: Row(//自由发挥 children: [ Container( padding: EdgeInsets.all(20), alignment: Alignment.center, child: Text('sdfsdf'), ), Container( padding: EdgeInsets.all(20), alignment: Alignment.center, child: Text('sdfsdf'), ), Container( padding: EdgeInsets.all(20), alignment: Alignment.center, child: Icon(Icons.add), ), ], ) ) )), SliverPersistentHeader( floating: true, pinned: true, delegate: CommonSliverHeaderDelegate( islucency: false, child:PreferredSize( preferredSize: Size(double.infinity,48), child:Container( child: TabBar( controller: this._tabController, tabs: <Widget>[ Tab(text: '资讯'), Tab(text: '技术'), ], ), ) ) )), // SliverAppBar( // pinned: true, // floating: true, // bottom: PreferredSize( // preferredSize: Size(double.infinity,48), // child:TabBar( // indicatorPadding: EdgeInsets.all(10), // labelColor: Colors.black, // controller: this._tabController, // tabs: <Widget>[ // Tab(text: '资讯'), // Tab(text: '技术'), // ], // ), // ) // ), SliverGrid( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, crossAxisSpacing: 5, mainAxisSpacing: 3), delegate: SliverChildBuilderDelegate((BuildContext context, int index) { return Container( color: Colors.primaries[index % Colors.primaries.length], ); }, childCount: 20), ) ]; }, body: TabBarView( controller: _tabController, //tabbar控制器 children: <Widget>[ Scaffold( body: Text('sdf'), ), Text('sdf'), ], ), ), );
上效果：
此功能到此为止。接下来我会研究tabbar的自定义高度问题，希望大家有什么问题可以和我探讨。
SliverAppBar
