模板网首页 > 建站教程 > APP开发,混合APP >  Flutter笔记48:SliverAppBar组件正文

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('向上拖动')),
      ),
    );
  }
}

0
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢