前言在业务开发中，我们经常会遇到滚动吸顶的效果。目前Flutter也有很多实现方式。这里介绍一下我在开发中使用的基于NestedScrollView的滚动。天花板组件；以及中间涉及的各种定位布局操作；效果NestedScrollView先了解一下NestedScrollView的滚动组件；NestedScrollView：支持嵌套滑动的ScrollView；property属性描述默认值controllerscrollmonitornoscrollDirection滚动方向Axis.verticaldefaultvertical方向reverse都是闪回。physics的默认值控制用户滚动视图的交互。AlwaysScrollableScrollPhysics始终可滑动。NeverScrollableScrollPhysics禁止滚动。BouncingScrollPhysics内容超出一屏，有回弹效果。NestedSliverBuilder:_headerSliv??erBuilder,body:buildSliverBody(context))///页面滚动头部处理List_headerSliv??erBuilder(BuildContextllcontext,boolinneredBoxIs){roreturn[buildSliverAppBar(context)];}///导航部分渲染WidgetbuildSliverAppBar(BuildContextcontext){returnSliverAppBar(//当这个值为true时，SliverAppBar会固定在页面顶部//当这个当值为false时，SliverAppBar会随着slidepinned向上滑动:true,//滚动是否拉伸图片stretch:true,//展开区域的高度expandedHeight:500,//当snap配置为true时,向下滑动页面,SliverAppBar(以及配置的flexibleSpace内容)会立即显示,//反之,当snap配置为false时,向下滑动时,只有ListView的数据滑动到的时候才会显示SliverAppBar顶部snap:false,//Shadowelevation:0,//背景颜色backgroundColor:headerWhite?Colors.white:Color(0xFFF4F5F7),//应用栏亮度，有白色和黑色两种主题，默认值为ThemeData.primaryColorBrightnessbrightness:Brightness.light,//标题左侧显示的控件，通常在主页上显示应用程序徽标；在其他界面中，通常显示为后退按钮前导：IconButton(icon:Image.network(backIcon,height:22,width:22,),onPressed:(){//TODO:返回事件处理}),//显示在AppBar下方的控件，高度与AppBar相同，//可以实现一些特殊效果，该属性一般在SliverAppBar中使用flexibleSpace:FlexibleSpaceBar(title:headerWhite?Text('长津湖',style:TextStyle(color:Color(0xFF333333),fontWeight:FontWeight.w700,fontSize:17,fontFamily:'PingFangSC-Semibold'),):Text(''),//标题居中centerTitle:true,background:buildAppBarBackground(context),),);}propertyconstSliverAppBar({Keykey,this.leading,//显示在标题左侧的控件，在首页通常显示应用的logo；在其他界面，它通常显示为后退按钮this.aautomaticallyImplyLeading=true,//?控制是否应该尝试暗示leadingwidget为nullthis.title,//当前界面的标题文本this.actions,//一个Widget列表，代表显示在Toolbar中的菜单，对于常用的菜单，通常以IconButton为代表；对于不常用的菜单，一般用PopupMenuButton来显示三个点，点击后会弹出一个二级菜单this.flexibleSpace,//显示在AppBar下方的控件，高度与AppBar高度相同，//一些特殊的可以实现效果，这个属性通常用在SliverAppBarthis.bottom,//一个AppBarBottomWidget对象，通常是一个TabBar，用来在Toolbar标题下显示一个Tab导航栏this.elevation,//shadowthis.forceElevated=false,this.backgroundColor,//APP栏颜色，默认值为ThemeData.primaryColor。该值通常与以下三个属性一起使用this.brightness,//Appbar的亮度，有白色和黑色两种主题，默认值为ThemeData.primaryColorBrightnessthis.iconTheme,//颜色和透明度应用栏上的图标，以及大小信息。默认值为ThemeData().primaryIconThemethis.textTheme,//应用栏上的文字主题。默认值为ThemeData().primaryTextThemethis.primary=true,//此应用栏是否显示在屏幕顶部this.centerTitle,//标题是否居中显示，默认值取决于不同操作系统，显示方式不同，true居中false居左this.titleSpacing=NavigationToolbar.kMiddleSpacing,//标题内容在横轴上的间距this.expandedHeight,//展开高度this.floating=false,//是否滑动隐藏标题this.pinned=false,//是否固定在顶部this.snap=false,//结合浮动使用})flexibleSpaceflexibleSpace:FlexibleSpaceBar(//是否显示标题title:headerWhite?Text('长津湖',style:TextStyle(color:Color(0xFF333333),fontWeight:FontWeight.w700,fontSize:17,fontFamily:'PingFangSC-Semibold'),):Text(''),//标题居中centerTitle:true,//折叠部分的背景图片background:Container(height:400,width:ScreenUtil().screenWidth,decoration:BoxDecoration(image:DecorationImage(image:NetworkImage('https://p0.meituan.net/movie/0e81560dc9910a6a658a82ec7a054ceb5075992.jpg@464w_644h_1e_1c'),fit:盒装.fill)),),)显示标题如下：滚动到某个位置不显示标题，显示如下：完整代码完整代码
