Flutter SliverAppBar


简介

SliverAppBar “应用栏”

  • 它类似于Android中的toolbar;

基本用法

虽然基本相同,构造方法也是非常的简单,但是却不能直接使用它,由官方文档可以看到通常结合 ScrollView 来使用它;

  • AppBar 和 SliverAppBar 都是继承StatefulWidget 类,都代表 Toobar;
  • 二者的区别在于 AppBar 位置的固定的应用最上面的;而 SliverAppBar 是可以跟随内容滚动的;
  • 下面的示例,放在 NestedScrollView 实现上提到顶的悬停;

实例演示

import 'package:flutter/material.dart';

/*
* 默认 SliverAppBar 的实例
* */
class SliverAppBarFullDefault extends StatefulWidget {
  const SliverAppBarFullDefault() : super();

  @override
  State<StatefulWidget> createState() => _SliverAppBarFullDefault();
}

/*
* SliverAppBar 默认的实例,有状态
* */
class _SliverAppBarFullDefault extends State {
  @override
  Widget build(BuildContext context) {
    return SliverAppBar(
      // ...  // 如果没有,就是不需要有状态的 StatefulWidget
    );
  }
}

/*
* SliverAppBar 默认的实例,无状态
* */
class SliverAppBarLessDefault extends StatelessWidget {
//  final widget;
//  final parent;
//  const SliverAppBarLessDefault([this.widget, this.parent])
//      : super();

  final List<ListItem> listData = [];
  @override
  Widget build(BuildContext context) {
    for (int i = 0; i < 20; i++) {
      listData.add( ListItem("我是测试标题$i", Icons.cake));
    }
    return  SizedBox(
        height: 500.0,
        child: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                //leading, // 在标题前面显示的一个控件,在首页通常显示应用的 logo;在其他界面通常显示为返回按钮
                //title, // Toolbar 中主要内容,通常显示为当前界面的标题文字
                //actions, // 一个 Widget 列表,代表 Toolbar 中所显示的菜单,对于常用的菜单,通常使用 IconButton 来表示;对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点,点击后弹出二级菜单
                //flexibleSpace,
                //bottom,         //底部内容区域
                //elevation, //阴影,纸墨设计中控件的 z 坐标顺序,默认值为 4,对于可滚动的 SliverAppBar,当 SliverAppBar 和内容同级的时候,该值为 0, 当内容滚动 SliverAppBar 变为 Toolbar 的时候,修改 elevation 的值
                //flexibleSpace:一个显示在 AppBar 下方的控件,高度和 AppBar 高度一样,可以实现一些特殊的效果,该属性通常在 SliverAppBar 中使用
                //backgroundColor,  // 背景色,APP bar 的颜色,默认值为 ThemeData.primaryColor。改值通常和下面的三个属性一起使用
                //brightness,   // 主题明亮,App bar 的亮度,有白色和黑色两种主题,默认值为 ThemeData.primaryColorBrightness
                //iconTheme,  // 图标主题,App bar 上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData.primaryIconTheme
                //textTheme,    //文字主题, App bar 上的文字样式。默认值为 ThemeData.primaryTextTheme
                //centerTitle,     //标题是否居中, 标题是否居中显示,默认值根据不同的操作系统,显示方式不一样
                primary: true,  //是否预留高度
                forceElevated:false,
                automaticallyImplyLeading:true,
                titleSpacing: NavigationToolbar.kMiddleSpacing,
                snap:false,   //与floating结合使用
                expandedHeight: 200.0,//展开高度
                floating: false,//是否随着滑动隐藏标题
                pinned: true,//是否固定在顶部
                flexibleSpace: FlexibleSpaceBar( //可以展开区域,通常是一个FlexibleSpaceBar
                    centerTitle: true,
                    title: Text("我是一个帅气的标题",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 16.0,
                        )),
                    background: Image.network(
                      //"http://h.hiphotos.baidu.com/image/pic/item/342ac65c103853434cc02dda9f13b07eca80883a.jpg",
                      "http://b.zol-img.com.cn/desk/bizhi/image/6/960x600/1432800027589.jpg",
                      //"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.fill,
                    )),
              ),
  //            SliverPersistentHeader(
  //                delegate: _SliverAppBarDelegate(
  //                  TabBar(
  //                    controller:  TabController(length: 2, vsync: this),
  //                    labelColor: Colors.black87,
  //                    unselectedLabelColor: Colors.grey,
  //                    tabs: [
  //                      Tab(icon: Icon(Icons.security), text: "security"),
  //                      Tab(icon: Icon(Icons.cake), text: "cake"),
  //                    ],
  //                  ),
  //                ))
            ];
        },
      body: Center(
        child:  ListView.builder(
          shrinkWrap: true,
          itemBuilder: (BuildContext context, int index) {
            return  ListItemWidget(listData[index]);
          },
          itemCount: listData.length,
        ),
      ),
    ));
  }
}

class ListItem {
  final String title;
  final IconData iconData;

  ListItem(this.title, this.iconData);
}

class ListItemWidget extends StatelessWidget {
  final ListItem listItem;

  ListItemWidget(this.listItem);

  @override
  Widget build(BuildContext context) {
    return  InkWell(
      child:  ListTile(
        leading:  Icon(listItem.iconData),
        title:  Text(listItem.title),
      ),
      onTap: () {},
    );
  }
}