Flutter基于CustomScrollView+SliverAppbar实现案例

SliverAppBar “应用栏” 相当于升级版的 appbar 于 AppBar 位置的固定的应用最上面的; 而 SliverAppBar 是可以跟随内容滚动的;

1、使用方法

1. 与CustomScrollView、NestedScrollView集成的材质设计应用栏。应用栏由工具栏和其他小部件组成&＃xff0c;例如 TabBar和FlexibleSpaceBar。应用栏通常会使用IconButton公开一个或多个常见操作&＃xff0c;后者可选地后跟 PopupMenuButton以进行不太常见的操作
2. 注意点&＃xff1a;
   通常结合 CustomScrollView 、 NestedScrollView 来使用它, NestedScrollView里面可以嵌套Listview 完成滑动

2、基本属性

const SliverAppBar({Key key,this.leading, //在标题左侧显示的一个控件&＃xff0c;在首页通常显示应用的 logo&＃xff1b;在其他界面通常显示为返回按钮this.automaticallyImplyLeading &＃61; true,//? 控制是否应该尝试暗示前导小部件为nullthis.title, //当前界面的标题文字this.actions, //一个 Widget 列表&＃xff0c;代表 Toolbar 中所显示的菜单&＃xff0c;对于常用的菜单&＃xff0c;通常使用 IconButton 来表示&＃xff1b;对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点&＃xff0c;点击后弹出二级菜单this.flexibleSpace, //一个显示在 AppBar 下方的控件&＃xff0c;高度和 AppBar 高度一样&＃xff0c; // 可以实现一些特殊的效果&＃xff0c;该属性通常在 SliverAppBar 中使用this.bottom, //一个 AppBarBottomWidget 对象&＃xff0c;通常是 TabBar。用来在 Toolbar 标题下面显示一个 Tab 导航栏this.elevation, //阴影this.forceElevated &＃61; false, this.backgroundColor, //APP bar 的颜色&＃xff0c;默认值为 ThemeData.primaryColor。改值通常和下面的三个属性一起使用this.brightness, //App bar 的亮度&＃xff0c;有白色和黑色两种主题&＃xff0c;默认值为 ThemeData.primaryColorBrightnessthis.iconTheme, //App bar 上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData().primaryIconThemethis.textTheme, //App bar 上的文字主题。默认值为 ThemeData&＃xff08;&＃xff09;.primaryTextThemethis.primary &＃61; true, //此应用栏是否显示在屏幕顶部this.centerTitle, //标题是否居中显示&＃xff0c;默认值根据不同的操作系统&＃xff0c;显示方式不一样,true居中 false居左this.titleSpacing &＃61; NavigationToolbar.kMiddleSpacing,//横轴上标题内容 周围的间距this.expandedHeight, //展开高度this.floating &＃61; false, //是否随着滑动隐藏标题this.pinned &＃61; false, //是否固定在顶部this.snap &＃61; false, //与floating结合使用})


3、常用属性

1. 在标题前面显示的一个控件&＃xff0c;在首页通常显示应用的logo&＃xff1b;在其他界面通常显示为返回按钮。

leading: Icon(_selectedChoice.icon) ,


2. 控制是否应该尝试暗示前导小部件为null&＃xff08;如果有 leading 这个不会管用 ,相当于忽略这个参数 &＃xff1b; 如果没有leading &＃xff0c;当有侧边栏的时候&＃xff0c; false&＃xff1a;不会显示默认的图片&＃xff0c;true 会显示 默认图片&＃xff0c;并响应打开侧边栏的事件&＃xff09;

automaticallyImplyLeading:true,


3. 当前界面的标题文字

title: Text(_selectedChoice.title )


4. 一个 Widget 列表&＃xff0c;代表 Toolbar 中所显示的菜单&＃xff0c;对于常用的菜单&＃xff0c;通常使用 IconButton 来表示&＃xff1b;对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点&＃xff0c;点击后弹出二级菜单

actions: <Widget>[new IconButton( // action buttonicon: new Icon(choices[0].icon),onPressed: () { _select(choices[0]); },),new IconButton( // action buttonicon: new Icon(choices[1].icon),onPressed: () { _select(choices[1]); },),new PopupMenuButton<Choice>( // overflow menuonSelected: _select,itemBuilder: (BuildContext context) {return choices.skip(2).map((Choice choice) {return new PopupMenuItem<Choice>(value: choice,child: new Text(choice.title),);}).toList();},)],


5. 一个显示在 AppBar 下方的控件&＃xff0c;高度和 AppBar 高度一样&＃xff0c;可以实现一些特殊的效果&＃xff0c;该属性通常在 SliverAppBar 中使用

flexibleSpace: Container(color: Colors.blue,width: MediaQuery.of(context).size.width,child: Text("aaaaaaaaaa"),height: 10,)


6. 一个 AppBarBottomWidget 对象&＃xff0c;通常是 TabBar。用来在 Toolbar 标题下面显示一个 Tab 导航栏

bottom: new TabBar(isScrollable: true,tabs: choices.map((Choice choice) {return new Tab(text: choice.title,icon: new Icon(choice.icon),);}).toList(),)


7. 标题居中显示

centerTitle: true,


9. 此应用栏是否显示在屏幕顶部

primary: true,


11. appbar是否随着滑动隐藏标题

floating: true,


12. tab 是否固定在顶部&＃xff08;为true是固定&＃xff0c;为false是不固定&＃xff09;

pinned: true,


14. 与floating结合使用,如果snap和floating为true&＃xff0c;则浮动应用栏将“捕捉”到视图中

snap: true,


16. 可滚动视图的高度&＃xff08;默认高度是状态栏和导航栏的高度&＃xff0c;如果有滚动视差的话&＃xff0c;要大于前两者的高度&＃xff09;

expandedHeight: 200.0,

二、CustomScrollView控件介绍

1、使用方法

• CustomScrollView是可以使用sliver来自定义滚动模型&＃xff08;效果&＃xff09;的ScrollView类型的widget。它可以包含多种滚动模型&＃xff0c;举个例子&＃xff0c;假设有一个页面&＃xff0c;顶部需要一个GridView&＃xff0c;底部需要一个ListView&＃xff0c;而要求整个页面的滑动效果是统一的&＃xff0c;即它们看起来是一个整体&＃xff0c;如果使用GridView&＃43;ListView来实现的话&＃xff0c;就不能保证一致的滑动效果&＃xff0c;因为它们的滚动效果是分离的&＃xff0c;所以这时就需要一个"胶水"&＃xff0c;把这些彼此独立的可滚动widget&＃xff08;Sliver&＃xff09;"粘"起来&＃xff0c;而CustomScrollView的功能就相当于“胶水”。
• CustomScrollView让你可以直接提供 slivers来创建不同的滚动效果&＃xff0c;比如Lists,grids 以及 expanding headers。
• Sliver有细片、小片之意&＃xff0c;在Flutter中&＃xff0c;Sliver通常指具有特定滚动效果的可滚动块。可滚动widget&＃xff0c;如ListView、GridView等都有对应的Sliver实现如SliverList、SliverGrid等。对于大多数Sliver来说&＃xff0c;它们和可滚动Widget最主要的区别是Sliver不会包含Scrollable Widget&＃xff0c;也就是说Sliver本身不包含滚动交互模型 &＃xff0c;正因如此&＃xff0c;CustomScrollView才可以将多个Sliver"粘"在一起&＃xff0c;这些Sliver共用CustomScrollView的Scrollable&＃xff0c;最终实现统一的滑动效果。

2、基本属性

const CustomScrollView({Key key,Axis scrollDirection &＃61; Axis.vertical,bool reverse &＃61; false,ScrollController controller,bool primary,ScrollPhysics physics,bool shrinkWrap &＃61; false,Key center,double anchor &＃61; 0.0,double cacheExtent,this.slivers &＃61; const <Widget>[],int semanticChildCount,DragStartBehavior dragStartBehavior &＃61; DragStartBehavior.start,}) : super(key: key,scrollDirection: scrollDirection,reverse: reverse,controller: controller,primary: primary,physics: physics,shrinkWrap: shrinkWrap,center: center,anchor: anchor,cacheExtent: cacheExtent,semanticChildCount: semanticChildCount,dragStartBehavior: dragStartBehavior,);

三、CustomScrollView集成SLiverAppBar案例

import &＃39;package:flutter/material.dart&＃39;;class CustomScrollViewTestRoute extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) {//因为本路由没有使用Scaffold&＃xff0c;为了让子级Widget(如Text)使用//Material Design 默认的样式风格,我们使用Material作为本路由的根。return Material(child: CustomScrollView(slivers: <Widget>[//AppBar&＃xff0c;包含一个导航栏SliverAppBar(pinned: true,expandedHeight: 250.0,flexibleSpace: FlexibleSpaceBar(title: const Text(&＃39;Demo&＃39;),background: Image.asset("./images/avatar.png", fit: BoxFit.cover,),),),SliverPadding(padding: const EdgeInsets.all(8.0),sliver: new SliverGrid( //GridgridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, //Grid按两列显示mainAxisSpacing: 10.0,crossAxisSpacing: 10.0,childAspectRatio: 4.0,),delegate: new SliverChildBuilderDelegate((BuildContext context, int index) {//创建子widget return new Container(alignment: Alignment.center,color: Colors.cyan[100 * (index % 9)],child: new Text(&＃39;grid item $index&＃39;),);},childCount: 20,),),),//Listnew SliverFixedExtentList(itemExtent: 50.0,delegate: new SliverChildBuilderDelegate((BuildContext context, int index) {//创建列表项 return new Container(alignment: Alignment.center,color: Colors.lightBlue[100 * (index % 9)],child: new Text(&＃39;list item $index&＃39;),);},childCount: 50 //50个列表项),),],),);}
}


代码分为三部分&＃xff1a;

• 头部SliverAppBar&＃xff1a;SliverAppBar对应AppBar&＃xff0c;两者不同之处在于SliverAppBar可以集成到CustomScrollView。SliverAppBar可以结合FlexibleSpaceBar实现Material Design中头部伸缩的模型&＃xff0c;具体效果&＃xff0c;读者可以运行该示例查看。
• 中间的SliverGrid&＃xff1a;它用SliverPadding包裹以给SliverGrid添加补白。SliverGrid是一个两列&＃xff0c;宽高比为4的网格&＃xff0c;它有20个子组件。
• 底部SliverFixedExtentList&＃xff1a;它是一个所有子元素高度都为50像素的列表。