美文网首页
Flutter Widget 011: SliverAppBar

Flutter Widget 011: SliverAppBar

作者: 狂奔的胖蜗牛 | 来源:发表于2021-03-26 00:17 被阅读0次

1.概要

Flutter自带了一种效果还是挺酷的可以拉伸和收缩的AppBar,就是SliverAppBar。效果就是下拉的时候,AppBar会扩大,往上滑的时候,AppBar会收缩回去,回到顶部。

2.源码

SliverAppBar({
    Key key,
    // appbar返回按钮位置处的Widget,一般放返回按钮
    this.leading,
    // 是否由系统决定返回按钮位置处放的内容
    this.automaticallyImplyLeading = true,
    // appbar标题位置Widget,此处是Widget,所以,可以放自己想放置的Widget,不一定非要是Text
    this.title,
    // 标题右边的按钮,可以放多个
    this.actions,
    // 底部可变化区域的Widget,位于SliverAppBar的下方,一般放置背景图之类的
    this.flexibleSpace,
    // 底部控件
    this.bottom,
    // 阴影高度
    this.elevation,
    // 阴影颜色
    this.shadowColor,
    // 是否强制显示阴影,默认为false
    this.forceElevated = false,
    // 背景颜色
    this.backgroundColor,
    // 亮度,可以决定状态栏的颜色
    this.brightness,
    // icon主题
    this.iconTheme,
    // 标题右侧icon主题
    this.actionsIconTheme,
    // 文字主题
    this.textTheme,
    // 是否在状态栏下面显示
    this.primary = true,
    // 标题是否居中
    this.centerTitle,
    // 是否包含头部描述控件,默认false
    this.excludeHeaderSemantics = false,
    // 标题和左右按钮的间距,如果不想要间距,设置为0
    this.titleSpacing = NavigationToolbar.kMiddleSpacing,
    // 收缩回去的高度
    this.collapsedHeight,
    // 暂开时的最大高度
    this.expandedHeight,
    // 是否往下滑动时,SliverAppBar就出现
    this.floating = false,
    // 往上滑时,是否让SliverAppBar固定在顶部被收起
    this.pinned = false,
    // 自动决定是展开还是收起状态,floating为true生效
    this.snap = false,
    // SliverAppBar是否可以继续往下拉伸适应
    this.stretch = false,
    // 触发继续往下拉事件的偏移量
    this.stretchTriggerOffset = 100.0,
    // 事件触发
    this.onStretchTrigger,
    // 是否突然出现
    this.shape,
    // toolbar高度
    this.toolbarHeight = kToolbarHeight,
    // 标题左侧内容宽度
    this.leadingWidth,
  })

3.示例

SliverAppBar需要配合CustomScrollView或者其子类使用,一般放在第一个子Widget。

Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.white,
        body: Scaffold(
          body: CustomScrollView(
            slivers: <Widget>[
              new SliverAppBar(
                title: Text("标题"),
                expandedHeight: 230.0,
                floating: false,
                pinned: true,
                snap: false,
              ),
              new SliverFixedExtentList(
                itemExtent: 50.0,
                delegate: new SliverChildBuilderDelegate(
                      (context, index) => new ListTile(
                    title: new Text("Item $index"),
                  ),
                  childCount: 30,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
image.png

相关文章

网友评论

      本文标题:Flutter Widget 011: SliverAppBar

      本文链接:https://www.haomeiwen.com/subject/wwjdhltx.html