Flutter笔记48：SliverAppBar组件

SliverAppBar相比与AppBar，可以滚动，还可以展开和折叠，它和AppBar都继承于StatefulWidget，需要和NestedScrollView结合使用，之前介绍FlexibleSpaceBar时也介绍过SliverAppBar：

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SliverAppBar组件',
      home: Scaffold(
        appBar: AppBar(
          title: Text('SliverAppBar组件'),
        ),
        body: NestedScrollView(
            //NestedScrollView头部
            headerSliverBuilder:
                (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                SliverAppBar(
                  //标题左边内容，这里是图标，和appBar一样
                  leading: Icon(Icons.home),
                  //标题右边的内容，和appBar一样
                  actions: [Icon(Icons.cloud_download)],
                  //阴影大小，和appBar一样
                  elevation: 20.0,
                  //是否固定在顶部
                  pinned: true,
                  //可扩展区域的高度
                  expandedHeight: 200.0,
                  //与floating结合使用
                  snap: false,
                  //是否随着滑动隐藏标题
                  floating: false,
                  //标题，在扩展区域已设置，这里可以不设置
                  // title: Text('这是标题'),
                  //扩展区域
                  flexibleSpace: FlexibleSpaceBar(
                    centerTitle: true,
                    title: Text(
                      '这是标题',
                      style: TextStyle(color: Colors.white, fontSize: 16.0),
                    ),
                    //折叠区域背景
                    background: Image.network(
                      'http://www.5imoban.net/uploads/allimg/200420/1-2004201246100-L.png',
                      fit: BoxFit.cover,
                    ),
                  ),
                )
              ];
            },
            //NestedScrollView内容
            body: Text('向上拖动')),
      ),
    );
  }
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！