原文：http://www.reibang.com/p/a25d747be7b4
flutter好用的輪子推薦十五-flutter給滾動內(nèi)容添加粘性header組件
IT小孢子關(guān)注
0.8432019.11.18 09:56:59字數(shù) 471閱讀 1,009
前言
Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面蹭沛。
IT界著名的尼古拉斯·高爾包曾說：輪子是IT進步的階梯排截！熱門的框架千篇一律，好用輪子萬里挑一挠蛉！Flutter作為這兩年開始崛起的跨平臺開發(fā)框架祭示，其第三方生態(tài)相比其他成熟框架還略有不足，但輪子的數(shù)量也已經(jīng)很多了谴古。本系列文章挑選日常app開發(fā)常用的輪子分享出來质涛，給大家提高搬磚效率，同時也希望flutter的生態(tài)越來越完善掰担，輪子越來越多汇陆。
本系列文章準備了超過50個輪子推薦，工作原因带饱，盡量每1-2天出一篇文章毡代。
tip:本系列文章合適已有部分flutter基礎(chǔ)的開發(fā)者阅羹，入門請戳：flutter官網(wǎng)
正文
輪子
輪子名稱：sticky_headers
輪子概述：flutter給滾動內(nèi)容添加粘性header組件.
輪子作者：fluttercommunity.dev(官方)
推薦指數(shù)：★★★★
常用指數(shù)：★★★★
效果預(yù)覽：
sticky_headers (1).gif
安裝
dependencies:sticky_headers:^0.1.8+1
import'package:sticky_headers/sticky_headers.dart';
使用方法
在列表項中，使用StickyHeader()教寂，基本用法：（gif效果圖中的默認效果）
ListView.builder(itemCount:12,itemBuilder:(context,index){returnStickyHeader(header:Container(//header組件height:50.0,color:Colors.blueGrey[700],padding:EdgeInsets.symmetric(horizontal:16.0),alignment:Alignment.centerLeft,child:Text('Header #$index',style:constTextStyle(color:Colors.white),),),content:Container(//內(nèi)容組件child:Image.network(imgs[index],fit:BoxFit.cover,width:double.infinity,height:200.0),),);})
在列表項中捏鱼，使用StickyHeaderBuilder()來自定義更多的header效果和事件：（gif效果圖中的自定義header效果）
ListView.builder(itemCount:12,itemBuilder:(context,index){returnStickyHeaderBuilder(builder:(BuildContext context,double stuckAmount){stuckAmount=1.0-stuckAmount.clamp(0.0,1.0);returnnewContainer(height:50.0,color:Color.lerp(Colors.blue[700],Colors.red[700],stuckAmount),padding:newEdgeInsets.symmetric(horizontal:16.0),alignment:Alignment.centerLeft,child:newRow(children:<Widget>[newExpanded(child:newText('Header #$index',style:constTextStyle(color:Colors.white),),),newOffstage(offstage:stuckAmount<=0.0,child:newOpacity(opacity:stuckAmount,child:newIconButton(icon:newIcon(Icons.favorite,color:Colors.white),onPressed:()=>Scaffold.of(context).showSnackBar(newSnackBar(content:newText('Favorite #$index'))),),),),],),);},content:newContainer(child:newImage.network(imgs[index],fit:BoxFit.cover,width:double.infinity,height:200.0),),);})
在列表項中，使用StickyHeaderBuilder()酪耕，overlapHeaders=true,使header懸浮在內(nèi)容上：（gif效果圖中的header浮動）
ListView.builder(itemCount:12,itemBuilder:(context,index){returnnewStickyHeaderBuilder(overlapHeaders:true,builder:(BuildContext context,double stuckAmount){stuckAmount=1.0-stuckAmount.clamp(0.0,1.0);returnnewContainer(height:50.0,color:Colors.grey[900].withOpacity(0.6+stuckAmount*0.4),padding:newEdgeInsets.symmetric(horizontal:16.0),alignment:Alignment.centerLeft,child:newText('Header #$index',style:constTextStyle(color:Colors.white),),);},content:newContainer(child:newImage.network(imgs[index],fit:BoxFit.cover,width:double.infinity,height:200.0),),);})
數(shù)據(jù)分組导梆，在content中渲染子列表，形成類似RN的SectionList：（gif效果圖中的SectionList效果）
classStickyHeadersDemo4extendsStatefulWidget{StickyHeadersDemo4({Key key}):super(key:key);@override_demoStatecreateState()=>_demoState();}class_demoStateextendsState<StickyHeadersDemo4>{List data=[{"latter":"A","group":["A分組1","A分組1","A分組1","A分組1","A分組1","A分組1"]},{"latter":"B","group":["B分組1","B分組1","B分組1","B分組1","B分組1","B分組1"]},{"latter":"C","group":["C分組1","C分組1","C分組1","C分組1","C分組1","C分組1"]},{"latter":"D","group":["D分組1","D分組1","D分組1","D分組1","D分組1","D分組1"]},{"latter":"E","group":["E分組1","E分組1","E分組1","E分組1","E分組1","E分組1"]}];@overrideWidgetbuild(BuildContext context){returnScaffold(appBar:AppBar(title:Text("sticky_headers"),actions:<Widget>[GoWeb(pluginName:'sticky_headers')],),body:ListView.builder(itemCount:data.length,itemBuilder:(context,index){returnStickyHeader(header:Container(height:50.0,color:Colors.blueGrey[700],padding:EdgeInsets.symmetric(horizontal:16.0),alignment:Alignment.centerLeft,child:Text(data[index]['latter'],style:constTextStyle(color:Colors.white),),),content:Column(children:buildGroup(data[index]['group']),),);}));}List<Widget>buildGroup(List group){returngroup.map((item){returnContainer(height:60,alignment:Alignment.centerLeft,padding:EdgeInsets.only(left:20),child:Text(item),);}).toList();}}
結(jié)尾
輪子倉庫地址：https://pub.flutter-io.cn/packages/sticky_headers
系列演示demo源碼：https://github.com/826327700/flutter_plugins_demo
9人點贊
