做Android都应该知道CollapsingToolbarLayout的折叠效果,SliverAppBar就和这个效果一样.比CollapsingToolbarLayout好用.

SliverAppBar
SliverAppBar
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import 'package:flutter/material.dart';

class GoogleSliverAppBar extends StatefulWidget {
@override
GoogleSliverAppBarState createState() => new GoogleSliverAppBarState();
}

class GoogleSliverAppBarState extends State<GoogleSliverAppBar>
with TickerProviderStateMixin {
@override
Widget build(BuildContext context) {
return CustomScrollView(
slivers: <Widget>[
SliverAppBar(
// leading: IconButton(icon: Icon(Icons.chevron_left), onPressed: null),
automaticallyImplyLeading: true,
actions: <Widget>[
Icon(Icons.add),
],
elevation: 10,
forceElevated: true,
title: Text('SliverAppBar'),
//标题居中
centerTitle: true,
//默认高度是状态栏和导航栏的高度,如果有滚动视差的话,要大于前两者的高度
expandedHeight: 300.0,
//滑动到最上面,再滑动是否隐藏导航栏的文字和标题等的具体内容,为true是隐藏,为false是不隐藏
floating: true,
//是否固定导航栏,为true是固定,为false是不固定,往上滑,导航栏可以隐藏
pinned: false,
//背景颜色
backgroundColor: Colors.green,
//黑底白字,lignt 白底黑字
brightness: Brightness.dark,
//所有的icon的样式,不仅仅是左侧的,右侧的也会改变
iconTheme: IconThemeData(color: Colors.red, size: 30, opacity: 1),
//字体样式
textTheme: TextTheme(),
// appbar是否显示在屏幕的最上面,为false是显示在最上面,为true就显示在状态栏的下面
primary: true,
//标题两边的空白区域
titleSpacing: 16,

flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
// title: Text('FlexibleSpaceBar'),
background: Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531798262708&di=53d278a8427f482c5b836fa0e057f4ea&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F342ac65c103853434cc02dda9f13b07eca80883a.jpg",
fit: BoxFit.cover,
),
collapseMode: CollapseMode.pin,
),
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.cake), text: '左侧'),
Tab(icon: Icon(Icons.center_focus_strong), text: '中侧'),
Tab(icon: Icon(Icons.golf_course), text: '右侧'),
],
controller: TabController(length: 3, vsync: this),
),
),
SliverGrid(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 4.0,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.green[100 * (index % 9)],
child: Text('grid item $index', style: TextStyle(fontSize: 16.0),),
);
},
childCount: 20,
),
),
SliverFixedExtentList(
itemExtent: 50.0,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
// alignment: Alignment.center,
color: Colors.lightBlue[100 * (index % 9)],
child: Text('list item $index', style: TextStyle(fontSize: 16.0,),),
);
},
),
),
],
);
}
}

代码github