sliverappbar高度_flutter布局-10-SliverAppBar 随内容一起滑动的头部

MaterialApp

SliverAppBar

就是底部的内容滑动，上面的导航栏也一起滑动，且滑动有视察，就像android的CollapsingToolbarLayout实现的折叠效果

先看下上图的具体用法

body: new CustomScrollView(

slivers: [

new SliverAppBar(

leading: GestureDetector(

child: Icon(Icons.arrow_back),

onTap: () => Navigator.pop(context),

), //左侧按钮

/**

* 如果没有leading，automaticallyImplyLeading为true，就会默认返回箭头

* 如果 没有leading 且为false，空间留给title

* 如果有leading，这个参数就无效了

*/

automaticallyImplyLeading: true,

// title: Text('大标题'), //标题

centerTitle: true, //标题是否居中

actions: [Icon(Icons.archive)], //右侧的内容和点击事件啥的

elevation: 4, //阴影的高度

forceElevated: false, //是否显示阴影

backgroundColor: Colors.green, //背景颜色

brightness: Brightness.dark, //黑底白字，lignt 白底黑字

iconTheme: IconThemeData(

color: Colors.red,

size: 30,

opacity: 1), //所有的icon的样式,不仅仅是左侧的，右侧的也会改变

textTheme: TextTheme(), //字体样式

primary: true, // appbar是否显示在屏幕的最上面，为false是显示在最上面，为true就显示在状态栏的下面

titleSpacing: 16, //标题两边的空白区域

expandedHeight: 200.0, //默认高度是状态栏和导航栏的高度，如果有滚动视差的话，要大于前两者的高度

floating: false, //滑动到最上面，再滑动是否隐藏导航栏的文字和标题等的具体内容，为true是隐藏，为false是不隐藏

pinned: true, //是否固定导航栏，为true是固定，为false是不固定，往上滑，导航栏可以隐藏

snap:

false, //只跟floating相对应，如果为true，floating必须为true，也就是向下滑动一点儿，整个大背景就会动画显示全部，网上滑动整个导航栏的内容就会消失

flexibleSpace: new FlexibleSpaceBar(

title: new Text("随内容一起滑动的头部"),

centerTitle: true,

collapseMode: CollapseMode.pin,

),

),

new SliverFixedExtentList(

itemExtent: 150.0,

delegate:

new SliverChildBuilderDelegate((context, index) => new ListTile(

title: new Text("List item $index"),

)),

)

],

),

复制代码

1. title：标题

可以是文字或者widget，可以自定义

如：

Container(

color: Colors.white10,

child: Row(

children: [Text('标题1'), Text('标题2')],

),

),

//表示两个文字横向排列

复制代码// 也可以直接用一个text来代替

Text('标题1')

复制代码

2. actions：表示右侧的按钮的动作

是一个包含widget的数组：

actions: [

IconButton(

icon: Icon(Icons.playlist_play),

tooltip: 'Air it',

onPressed: null,

),

IconButton(

icon: Icon(Icons.playlist_add),

tooltip: 'Restitch it',

onPressed: null,

),

],

复制代码

上面表示两个按钮，同时还有点击事件，只不过上面我把点击事件写成了空的。

3. leading：表示左侧的按钮的动作

这个也是一个widget，也可以自定义动作，如下：

leading: Builder(

builder: (BuildContext context) {

return IconButton(

icon: const Icon(Icons.menu),

onPressed: () {

Scaffold.of(context).openDrawer();

},

tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,

);

},

), // 左侧返回按钮，可以有按钮，可以有文字

上面表示构造一个新的widget，点击事件是打开左侧的抽屉

复制代码

4. flexibleSpace：

堆叠在工具栏和标签栏后面。 它的高度与应用栏的整体高度相同。

flexible space 实际上并不灵活，除非[AppBar]的容器改变了[AppBar]的大小。 [CustomScrollView]中的[SliverAppBar]在滚动时更改[AppBar]的高度。

也可以看下 FlexibleSpaceBar

flexibleSpace: Text('d12321312'),

复制代码flexibleSpace: FlexibleSpaceBar(

title: Text('flexibleSpace'),

background: Icon(Icons

.add), //背景，一般是一个图片，在title后面，[Image.fit] set to [BoxFit.cover].

centerTitle: true,

collapseMode: CollapseMode

.pin, // 背景 固定到位，直到达到最小范围。 默认是CollapseMode.parallax(将以视差方式滚动。)，还有一个是none，滚动没有效果

),

复制代码

5. backgroundColor: Colors.red,

//导航栏和状态栏的的颜色

导航栏的颜色和样式可以再Main.dart的MaterialApp里面配置统一的。

但有时间我们的某些页面有单独的设计，这个背景也是可以修改的。

6. elevation: 10, //阴影的高度

默认在导航栏的下面有4的高度阴影，这个也可以修改的

7.automaticallyImplyLeading: true,

/**

* 如果没有leading，automaticallyImplyLeading为true，就会默认返回箭头

* 如果 没有leading 且为false，空间留给title

* 如果有leading，这个参数就无效了

*/

复制代码

8.brightness ：状态栏的亮度

这与[backgroundColor]，[iconTheme]，[textTheme]一起设置。

默认是和 ThemeData.primaryColorBrightness 一致的.

Brightness.light, 白底黑字

Brightness.dark, 黑底白字

复制代码

9. iconTheme，图标的样式

iconTheme: IconThemeData(

color: Colors.yellow,

opacity: 0.5,

size: 30), //icon的主题样式,默认的颜色是黑色的，不透明为1，size是24

复制代码

表示颜色是黄色，不透明度是0.5，最大值是1；

以及大小是30，默认的大小是24

##10.textTheme：字体的样式

我们要设置的话一般用merge，这样不会改变其他的值。

默认有13中样式：

NAME SIZE WEIGHT SPACING 2018 NAME

display4 112.0 thin 0.0 headline1

display3 56.0 normal 0.0 headline2

display2 45.0 normal 0.0 headline3

display1 34.0 normal 0.0 headline4

headline 24.0 normal 0.0 headline5

title 20.0 medium 0.0 headline6

subhead 16.0 normal 0.0 subtitle1

body2 14.0 medium 0.0 body1

body1 14.0 normal 0.0 body2

caption 12.0 normal 0.0 caption

button 14.0 medium 0.0 button

subtitle 14.0 medium 0.0 subtitle2

overline 10.0 normal 0.0 overline

复制代码

其中thin 表示字体的粗细为FontWeight.w100

normal是FontWeight.w400

medium是FontWeight.w500

字符间距为0.0

size就是字体的大小

##11.centerTitle：标题是否居中

centerTitle: true, //标题是否居中，默认为false

复制代码

默认是false，一般我们的设计都是把导航栏的标题居中，不遵循android的md设计，都是按照苹果的设计来的

12. forceElevated: false, //是否显示阴影

##13. primary: true, //appbar是否显示在屏幕的最上面，为false是显示在最上面，为true就显示在状态栏的下面

14. titleSpacing: 10, //标题两边的空白区域,

15. expandedHeight: 200.0, 可滚动视图的高度

//默认高度是状态栏和导航栏的高度，如果有滚动视差的话，要大于前两者的高度

16. floating: false, //是否隐藏可滚动的标题

滑动到最上面，再滑动是否隐藏导航栏的文字和标题等的具体内容，为true是隐藏，为false是不隐藏

15. pinned: true, //是否固定导航栏，

为true是固定，为false是不固定，往上滑，导航栏可以隐藏

snap:

##15. false, //是否整块滑动

只跟floating相对应，如果为true，floating必须为true，也就是向下滑动一点儿，整个大背景就会动画显示全部，网上滑动整个导航栏的内容就会消失