SliverAppBar

前言


前一段时间由于个人原因消失了一段时间,哈哈,想我没?抱歉.0.0

好吧,我们还是来开始看下今天的内容吧。在前面的文章中我们将到了Appbar的用户,它类似于Android中的toolbar,但是熟悉Android开发的童鞋应该知道在Android中还有个Collapsing Toolbar的东西,就是一个可以折叠的标题栏效果,不知道长什么样子的童鞋问下周围的小伙伴如何?或者你咨询下你的搜索引擎吧。

接下来我们来介绍下SliverAppBar

SliverAppBar


我看还是先来看下SliverAppBar的构造方法

构造方法也是非常的简单,但是我们却不能直接使用它,由官方文档可以看到我们通常结合ScrollView来使用它。

我们结合CustomScrollView来看下例子吧。

首先我们使用了NestedScrollView中的headerSliverBuilder属性添加了SliverAppBar

然后我们设置展开的高度为200,不让标题栏随着滑动滚动出可视区域

我们使用flexibleSpace来构建了一个可以滚动的区域 最后我们给NestedScrollView的body加了一个ListView

然后我们来看下效果:

我们把 pinned的属性设置为false再看下效果

接下来我们来看下bottom属性,允许我们在在下面放置你想放置其他Widget,好吧我们来放个TabBar看下

其实代码很简单,只不过我们需要让MyApp继承于 StatefulWidget,让后让State TickerProviderStateMixin

让后给SliverAppBar增加如下代码即可。

当然我们是希望这个TabBar在SliverAppBar下方,并且随着SliverAppBar滚动的,但是我们还是来看下效果吧

很丑有没有,由于TabBar的高度所以我们并不能让SliverAppBar滑动到顶部,所以要想实现随着SliverAppBar的移动,把TabBar放在bottom也不是很合适的。

在这里,我们可以借助于SliverPersistentHeader中的SliverPersistentHeader属性来解决

SliverPersistentHeader的构造很简单,只有简单的几个属性,不再具体讲了

全部代码如下:

效果如下:

但是有童鞋就问问了,我们怎么让这个SliverPersistentHeader中的内容(TabBar)不随着ListView的滚动而滑动呢?其实很简单,因为SliverPersistentHeader跟SliverAppBar一样都有一个 pinned属性,将它设置为true这里面的内容就会在到达顶部后停止跟随ListView移动了。

本期小结


  • 熟悉SliverAppBar的用法
  • 了解CustomScrollView的用法
  • 了解SliverPersistentHeader的用法

本文分享自微信公众号 - flutter开发者(Flutter_Developers),作者:Flutter开发者

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-07-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [Flutter Widget] TabBar

    TabBar在客户端的表现形式是一般展示在appBar的下面,做同一级别不同类型界面的展示工作。

    flyou
  • Flutter状态管理

    在前面的文章中我们学习了Flutter中事件传递的方法,让我们可以在数据流向简单的业务场景中使用InheritedWidget、Notification 或者 ...

    flyou
  • 自定义View案例【LabelView】

    在前面的几篇文章中我们介绍了Flutter中自定义view的用法,学习了canvas中常用的绘制方法,在这篇及以后的几篇文章中我会给大家写几个自定义View的例...

    flyou
  • Flutter之SliverAppBar

    SliverAppBar控件可以实现页面头部区域展开、折叠的效果,类似于Android中的CollapsingToolbarLayout。

    老孟Flutter
  • Java 8 函数式编程Java 8 函数式编程

    java.util.function.* @FunctionalInterface 都是函数接口,没有成员(状态)

    林万程
  • java8 Lambda Stream collect Collectors 常用实例

    字典查询和数据转换 toMap时,如果value为null,会报空指针异常 解决办法一:

    Erwin
  • TW洞见 | 韩锴:HTTPS背后的加密算法

    当你在浏览器的地址栏上输入https开头的网址后,浏览器和服务器之间会在接下来的几百毫秒内进行大量的通信。这些复杂的步骤的第一步,就是浏览器与服务器之间协商一个...

    ThoughtWorks
  • [ISUX译]响应式图像 - 腾讯ISUX

    腾讯ISUX
  • [译]响应式图像

    自从2010年Ethan Marcotte开始讨论响应式网页设计,开发者和设计师们竞相寻求处理响应式图片的方法。这的确是一个棘手的问题 ,因为我们对同一个网站在...

    Jace
  • [译]响应式图像

    自从2010年Ethan Marcotte开始讨论响应式网页设计,开发者和设计师们竞相寻求处理响应式图片的方法。这的确是一个棘手的问题 ,因为我们对同一个网站在...

    练小习

扫码关注云+社区

领取腾讯云代金券