-
Notifications
You must be signed in to change notification settings - Fork 22
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
在Flutter中创建有意思的滚动效果 - Sliver系列 #18
Labels
Flutter
Flutter学习
Comments
@jahnli |
@SmallStoneSK 我想到了这个问题,但是 |
@jahnli tabs: <Widget>[
Container(
width: 150,
color: Colors.yellow,
child: Text('Home'),
),
Tab(text: 'Profile'),
] |
底部内容很多的情况下,会出现溢出条 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1. 前言
Flutter
作为时下最流行的技术之一,凭借其出色的性能以及抹平多端的差异优势,早已引起大批技术爱好者的关注,甚至一些闲鱼
,美团
,腾讯
等大公司均已投入生产使用。虽然目前其生态还没有完全成熟,但身靠背后的Google
加持,其发展速度已经足够惊人,可以预见将来对Flutter
开发人员的需求也会随之增长。无论是为了技术尝鲜还是以后可能的工作机会,都9102年了,作为一个前端开发者,似乎没有理由不去尝试它。正是带着这样的心理,笔者也开始学习
Flutter
,同时建了一个用于练习的仓库,后续所有代码都会托管在上面,欢迎star,一起学习。在之前的文章中,我们学习了如何使用
ListView
和GridView
这两个滚动类型组件。今天,我们就来学习另一个滚动组件CustomScrollView
及其搭配使用的Sliver
系列组件。掌握了它们,你就可以做一些有趣的滚动效果啦~2. 必备知识
在进入今天的正题之前,我们先来简单了解下今天的两个主角
CustomScrollView
和Sliver
:CustomScrollView
是Flutter
提供的可以用来自定义滚动效果的组件,它可以像胶水一样将多个Sliver
粘合在一起。什么意思呢?举个栗子(你也可以点击这里看
youtube
上的一个视频):假如页面中同时存在一个
List
和一个Grid
,虽然它们看起来是一个整体,但是由于各自的滚动效果是分离的,所以没法保证一致的滚动效果。而使用
CustomScrollView
组件作为滚动容器,SliverList
和SliverGrid
分别替代List
和Grid
作为CustomScrollView
的子组件,滚动效果再由CustomScrollView
统一控制,这样就可以了。其中
SliverList
和SliverGrid
就是我们前面提到的Sliver
系列中的两员,除此之外,Sliver
家族还有常用的几个:SliverAppBar
:Creates a material design app bar that can be placed in a CustomScrollView.SliverPersistentHeader
:Creates a sliver that varies its size when it is scrolled to the start of a viewport.SliverFillRemaining
:Creates a sliver that fills the remaining space in the viewport.SliverToBoxAdapter
:Creates a sliver that contains a single box widget.SliverPadding
:Creates a sliver that applies padding on each side of another sliver.注意:由于
CustomeScrollView
的子组件只能是Sliver
系列,所以如果你想将一个普通组件塞进CustomScrollView
,那么务必将该组件用SliverToBoxAdapter
包裹。3. 热身:SliverList / SliverGrid
前面讲了那么多的概念似乎有些枯燥,接下来就让我们从最简单的一个例子入手来看看如何使用
CustomScrollView
和SliverList
/SliverGrid
。其实
CustomScrollView
的用法很简单,它有一个slivers
属性,是一个Widget
数组,将子组件都放在里面就可以了,其他的一些滚动相关的属性基本和我们之前学到的ListView
差不多。再来看看
SliverList
,它只有一个delegate
属性,可以用SliverChildListDelegate
或SliverChildBuilderDelegate
这两个类实现。前者将会一次性全部渲染子组件,后者将会根据视窗渲染当前出现的元素,其效果可以和ListView
和ListView.build
这两个构造函数类比。通过上面的例子我们发现
SliverList
的使用方式和ListView
大同小异,而SliverGrid
也是如此,这里就不再过多赘述,来看个两列网格的例子:接下来,就让我们通过一个实际例子将上面的三点结合在一起。
代码(完整版看这里):
效果图:
上面的例子中还有一点需要注意的是:我们将标题组件放在了
SliverToBoxAdapter
内,因为CustomScrollView
只接受Sliver
系列的组件。4. 眼前一亮的SliverAppBar
AppBar
是常用来构建一个页面头部Bar
的组件,在CustomScrollView
中与其对应的是SliverAppBar
组件。它有什么神奇之处呢?随着页面的滚动,头部Bar
将会有一个收起过渡的效果。我们先来看下效果:通过上面的预览图,想必你肯定很好奇
SliverAppBar
中的过渡效果是如何实现的~先别急,我们先来看下应该如何使用它:SliverAppBar
最重要的几个属性在上面的例子中罗列出来。其中:expandedHeight
:展开状态下appBar
的高度,即图中图片所占空间;flexibleSpace
:空间大小可变的组件,Flutter
给我们提供了一个现成的FlexibleSpaceBar
组件,给我们处理好了title
过渡的效果。另外,
floating
/snap
/pinned
这三个属性可以指定SliverAppBar
内容滑出屏幕之后的表现形式。float
:向下滑动时,即使当前CustomScrollView
不在顶部,SliverAppBar
也会跟着一起向下出现;snap
:当手指放开时,SliverAppBar
会根据当前的位置进行调整,始终保持展开
或收起
的状态;pinned
:不同于float
效果,当SliverAppBar
内容滑出屏幕时,将始终渲染一个固定在顶部的收起状态组件。需要注意的是:
snap
效果一定要在float
为true
时才会生效。另外,你也可以将这三者进行组合使用。5. 花样多变的SliverPersistentHeader
在上一小节中我们见识到了
SliverAppBar
的神奇之处,其实它就是基于SliverPersistentHeader
实现的。通过SliverPersistentHeader
,我们还可以实现sticky
吸顶的效果。SliverPersistentHeader
最重要的一个属性是SliverPersistentHeaderDelegate
,为此我们需要实现一个类继承自SliverPersistentHeaderDelegate
。可以看到,
SliverPersistentHeaderDelegate
的实现类必须实现其4个方法。其中:minExtent
:收起状态下组件的高度;maxExtent
:展开状态下组件的高度;shouldRebuild
:类似于react
中的shouldComponentUpdate
;build
:构建渲染的内容。接下来,我们就来实现一个
TabBar
吸顶的效果。代码(完整版看这里):
效果图:
根据上面的图我们可以看到,当下方
tab
内容滑出屏幕后,tabBar
并没有跟着一起滑走,而是粘在了顶部。可见SliverPersistentHeader
的确可以满足我们的sticky
效果。不过
SliverPersistentHeader
的神奇可远不止如此哦~我们可以通过它自定义一些头部的过渡效果,毕竟SliverAppBar
也是通过它实现的。就比如下方这个电影详情页的头部过渡效果,这在一般的app种还是比较常见的。那么这种效果要如何实现呢?关键就在于
build
方法中的shrinkOffset
属性,它代表当前头部的滚动偏移量。我们可以根据它计算得到当前收起头部的背景颜色
以及图标和文案的字体颜色
,这样就能根据当前位置得到过渡效果啦~代码(完整版看这里):
上面的代码虽然很长,但大部分是构建
widget
的代码。所以,我们重点关注makeStickyHeaderTextColor
和makeStickyHeaderBgColor
即可。这两个方法都是根据当前的shrinkOffset
值计算过渡过程中的颜色值。另外,这里需要注意头部在iPhoneX
及以上的刘海头涉及,可以用SafeArea
组件解决问题。6. 总结
本文首先介绍了
CustomScrollView
和Sliver
系列组件的概念及其关系,接着以SliverList
和SliverGrid
结合的示例说明了其使用方法。然后,又介绍了较常用的SliverAppBar
组件,分别解释了其float
/snap
/pinned
各自的效果。最后,讲解了SliverPersistentHeader
组件的使用方法,并用实际例子加以说明其自定义过渡效果的用法。希望通过本文的介绍,你可以用CustomScrollView
和Sliver
系列组件创建出更有意思的滚动效果~本文所有代码托管在这儿,也可以关注我的Blog,欢迎一起交流学习~
The text was updated successfully, but these errors were encountered: