flutter做吸顶效果（flutter好用的轮子推荐十五-flutter给滚动内容添加粘性header组件）

原文：https://www.jianshu.com/p/a25d747be7b4

flutter好用的轮子推荐十五-flutter给滚动内容添加粘性header组件

IT小孢子关注

0.8432019.11.18 09:56:59字数 471阅读 1,009

前言

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。

IT界著名的尼古拉斯·高尔包曾说：轮子是IT进步的阶梯！热门的框架千篇一律，好用轮子万里挑一！Flutter作为这两年开始崛起的跨平台开发框架，其第三方生态相比其他成熟框架还略有不足，但轮子的数量也已经很多了。本系列文章挑选日常app开发常用的轮子分享出来，给大家提高搬砖效率，同时也希望flutter的生态越来越完善，轮子越来越多。

本系列文章准备了超过50个轮子推荐，工作原因，尽量每1-2天出一篇文章。

tip:本系列文章合适已有部分flutter基础的开发者，入门请戳：flutter官网

正文

轮子

轮子名称：sticky_headers

轮子概述：flutter给滚动内容添加粘性header组件.

轮子作者：fluttercommunity.dev(官方)

推荐指数：★★★★

常用指数：★★★★

效果预览：

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(//内容组件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:[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悬浮在内容上：（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),),);})

数据分组，在content中渲染子列表，形成类似RN的SectionList：（gif效果图中的SectionList效果）

classStickyHeadersDemo4extendsStatefulWidget{StickyHeadersDemo4({Key key}):super(key:key);@override_demoStatecreateState()=>_demoState();}class_demoStateextendsState{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:[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']),),);}));}ListbuildGroup(List group){returngroup.map((item){returnContainer(height:60,alignment:Alignment.centerLeft,padding:EdgeInsets.only(left:20),child:Text(item),);}).toList();}}

结尾

轮子仓库地址：https://pub.flutter-io.cn/packages/sticky_headers

系列演示demo源码：https://github.com/826327700/flutter_plugins_demo

9人点赞

前端开发