Open SmallStoneSK opened 5 years ago
请教一下,整个代码,只见到这一个地方有physics属性,并且注释了之后,还是有回弹,是怎么回事
请教一下,整个代码,只见到这一个地方有physics属性,并且注释了之后,还是有回弹,是怎么回事
@DuRofei 这个地方你可能理解错了:
NeverScrollableScrollPhysics
就是用来禁用回弹效果的,你注释掉了系统就会用默认值,而默认值就是根据Android/iOS选择各自平台的效果(Android是水波纹,iOS是弹性)。微信公众号卡片
的布局,而不是整个微信公众号列表这个文件。截图的地方用NeverScrollableScrollPhysics
是因为这个卡片中的文章列表也用了ListView
,如果不禁用滚动物理效果,会导致卡片内部的文章列表也可以上下拖动。另外,如果你想禁用整个列表的弹性效果,你应该在这里加上physics: NeverScrollableScrollPhysics()
来限制。请教一下,整个代码,只见到这一个地方有physics属性,并且注释了之后,还是有回弹,是怎么回事
@DuRofei 这个地方你可能理解错了:
- 第一个问题是
NeverScrollableScrollPhysics
就是用来禁用回弹效果的,你注释掉了系统就会用默认值,而默认值就是根据Android/iOS选择各自平台的效果(Android是水波纹,iOS是弹性)。- 第二个是你找错文件的位置了额。。你截图的代码块是
微信公众号卡片
的布局,而不是整个微信公众号列表这个文件。截图的地方用NeverScrollableScrollPhysics
是因为这个卡片中的文章列表也用了ListView
,如果不禁用滚动物理效果,会导致卡片内部的文章列表也可以上下拖动。另外,如果你想禁用整个列表的弹性效果,你应该在这里加上physics: NeverScrollableScrollPhysics()
来限制。
对的,我发完之后也发现了,现在最大的困惑就是,代码里没有见到哪个地方开启了 physics 效果,但是却有这个效果,我自己写的 Demo 就不行。另外不喜欢拉到底就定死的那种,总感觉画面不流畅。
请教一下,整个代码,只见到这一个地方有physics属性,并且注释了之后,还是有回弹,是怎么回事
@DuRofei 这个地方你可能理解错了:
- 第一个问题是
NeverScrollableScrollPhysics
就是用来禁用回弹效果的,你注释掉了系统就会用默认值,而默认值就是根据Android/iOS选择各自平台的效果(Android是水波纹,iOS是弹性)。- 第二个是你找错文件的位置了额。。你截图的代码块是
微信公众号卡片
的布局,而不是整个微信公众号列表这个文件。截图的地方用NeverScrollableScrollPhysics
是因为这个卡片中的文章列表也用了ListView
,如果不禁用滚动物理效果,会导致卡片内部的文章列表也可以上下拖动。另外,如果你想禁用整个列表的弹性效果,你应该在这里加上physics: NeverScrollableScrollPhysics()
来限制。
还有就是首页的那个 gridview 也默认开启了效果,让我非常困惑。
还有就是首页的那个 gridview 也默认开启了效果,让我非常困惑。
@DuRofei 你是在Android模拟器上跑的还是在iOS模拟器上跑的?Android上就是拉到底会定死的,只不过会有个水波纹,它是Material Design的风格,就是这样。还是你的ListView
中的内容高度不够?
而且由于physics
字段的默认值就是AlwaysScrollableScrollPhysics
,所以我也就没指定physics
属性值了。ListView的源码跟踪进去你会发现继承关系:ListView
<- BoxScrollView
<- ScrollView
,在scroll_view.dart
这个文件,如果传的physics
属性不为空就用传的physics
值,否则默认是AlwaysScrollableScrollPhysics
。
还有就是首页的那个 gridview 也默认开启了效果,让我非常困惑。
@DuRofei 你是在Android模拟器上跑的还是在iOS模拟器上跑的?Android上就是拉到底会定死的,只不过会有个水波纹,它是Material Design的风格,就是这样。还是你的
ListView
中的内容高度不够?而且由于
physics
字段的默认值就是AlwaysScrollableScrollPhysics
,所以我也就没指定physics
属性值了。ListView的源码跟踪进去你会发现继承关系:ListView
<-BoxScrollView
<-ScrollView
,在scroll_view.dart
这个文件,如果传的physics
属性不为空就用传的physics
值,否则默认是AlwaysScrollableScrollPhysics
。
哦哦,我这边是不行的,可能哪个地方写的有问题,我再去查一下,谢谢大神讲解。
还有就是首页的那个 gridview 也默认开启了效果,让我非常困惑。
@DuRofei 你是在Android模拟器上跑的还是在iOS模拟器上跑的?Android上就是拉到底会定死的,只不过会有个水波纹,它是Material Design的风格,就是这样。还是你的
ListView
中的内容高度不够?而且由于
physics
字段的默认值就是AlwaysScrollableScrollPhysics
,所以我也就没指定physics
属性值了。ListView的源码跟踪进去你会发现继承关系:ListView
<-BoxScrollView
<-ScrollView
,在scroll_view.dart
这个文件,如果传的physics
属性不为空就用传的physics
值,否则默认是AlwaysScrollableScrollPhysics
。
作了孽的,多写了一行这个玩意,谢谢大神
想请教一个问题,如何在一个ListView.builder()内部再写一个子集数据渲染的ListView.builder(),因为业务要求第一层数据是一个ListView.builder()的card显示,循环内的第二层数据也要用ListView.builder()显示成Card,不知道如何写
@Lesliegc 你的需求是做一个二级列表吧?那就在第一个ListView.builder的itemBuilder
中返回一个新的ListView.Builder
就行吧。
理论上是应该你说的这么写,但我是在第一个itemBuilder中写了一个card,然后第二个ListView.builder是应该与Card同级,写这个样式关系的时候不知道怎么写
@Lesliegc 你说的card
可以作为第二个ListView.builder
的第一个元素
1. 前言
Flutter
作为时下最流行的技术之一,凭借其出色的性能以及抹平多端的差异优势,早已引起大批技术爱好者的关注,甚至一些闲鱼
,美团
,腾讯
等大公司均已投入生产使用。虽然目前其生态还没有完全成熟,但身靠背后的Google
加持,其发展速度已经足够惊人,可以预见将来对Flutter
开发人员的需求也会随之增长。无论是为了技术尝鲜还是以后可能的工作机会,都9102年了,作为一个前端开发者,似乎没有理由不去尝试它。正是带着这样的心理,笔者也开始学习
Flutter
,同时建了一个用于练习的仓库,后续所有代码都会托管在上面,欢迎star,一起学习。在上一篇文章中,我们学习了
Flutter
中使用频率最高的一些基础组件。但是在一些场景中,当组件的宽度或高度超出屏幕边缘时,Flutter
往往会给出overflow
警告,提醒有组件溢出屏幕。为了解决这个问题,今天我们就来学习最常用的一个滚动型容器组件
—ListView组件
。2. ListView使用方法
从功能比较上来看,
Flutter
中的ListView
组件和RN
中的ScrollView
/FlatList
非常相似,但是在使用方法上还是有点区别。接下来,就跟着我一起来看看ListView
组件都有哪些常用的使用方法。2.1 ListView()
第一种使用方法就是直接调用其
默认构造函数
来创建列表,效果等同于RN
中的ScrollView
组件。但是这种方式创建的列表存在一个问题:对于那些长列表
或者需要较昂贵渲染开销
的子组件,即使还没有出现在屏幕中但仍然会被ListView
所创建,这将是一项较大的开销,使用不当可能引起性能问题甚至卡顿。不过话说回来,虽然该方法可能会有性能问题,但还是取决于其不同的应用场景而定。下面我们就来看下其构造函数(已省略不常用属性):
scrollDirection
: 列表的滚动方向,可选值有Axis
的horizontal
和vertical
,可以看到默认是垂直方向上滚动;controller
: 控制器,与列表滚动相关,比如监听列表的滚动事件;physics
: 列表滚动至边缘后继续拖动的物理效果,Android
与iOS
效果不同。Android
会呈现出一个波纹状(对应ClampingScrollPhysics
),而iOS
上有一个回弹的弹性效果(对应BouncingScrollPhysics
)。如果你想不同的平台上呈现各自的效果可以使用AlwaysScrollableScrollPhysics
,它会根据不同平台自动选用各自的物理效果。如果你想禁用在边缘的拖动效果,那可以使用NeverScrollableScrollPhysics
;shrinkWrap
: 该属性将决定列表的长度是否仅包裹其内容的长度。当ListView
嵌在一个无限长的容器组件中时,shrinkWrap
必须为true,否则Flutter
会给出警告;padding
: 列表内边距;itemExtent
: 子元素长度。当列表中的每一项长度是固定的情况下可以指定该值,有助于提高列表的性能(因为它可以帮助ListView
在未实际渲染子元素之前就计算出每一项元素的位置);cacheExtent
: 预渲染区域长度,ListView
会在其可视区域的两边留一个cacheExtent
长度的区域作为预渲染区域(对于ListView.build
或ListView.separated
构造函数创建的列表,不在可视区域和预渲染区域内的子元素不会被创建或会被销毁);children
: 容纳子元素的组件数组。上面的属性介绍一大堆,都不如一个实际例子来得实在。我们可以用一个
ListView
组件来包裹上篇文章中实现的银行卡,宠物卡片,朋友圈这三个例子:代码(文件地址)
预览
可以看到,
默认构造函数
的用法非常之简单,直接把子元素组件放在children
数组中就可以了。但是潜在的问题前面也已经解释过,对于长列表
这种应用场景还是应该用ListView.build
构造函数性能会更好。2.2 ListView.build()
ListView
默认构造函数虽使用简单,但不适用于长列表。为此,我们来看下ListView.build
构造函数:这里省略了不常用以及和
ListView
默认构造函数重复的一些参数,相比之下我们可以发现ListView.builder
多了两个新的参数:itemCount
: 列表中元素的数量;itemBuilder
: 子元素的渲染方法,允许自定义子元素组件(等同于rn
中FlatList
组件的renderItem
属性)。不同于
ListView
默认构造函数通过children
参数指定子元素的这种方式,ListView.build
通过暴露统一的itemBuilder
方法将渲染子元素的控制权交还给调用方。这里我们用一个微信公众号的例子来说明ListView.build
的使用方法(公众号卡片的样式布局可以看这里,也算是对基础组件的一个巩固和复习):代码(文件地址)
预览
根据上面的代码可以看到,
ListView.build
创建列表最重要的两个参数就是itemCount
和itemBuilder
。对于公众号列表这个例子,由于每个公众号消息卡片的布局都是有规则的,而且这个列表的数量可能非常之多,所以用ListView.build
来创建再适合不过了。2.3 ListView.separated()
绝大多数列表类的需求我们都可以用
ListView.build
构造函数来解决问题,不过有的列表子项之间需要分割线
,此时我们可以用Flutter
提供的另一个构造函数ListView.separated
来创建列表。来看下其构造函数有什么不同:相比于
ListView.build
构造函数,可以看到ListView.separated
仅仅是多了一个separatorBuilder
必填参数。顾名思义,这就是暴露给调用方自定义分割线组件的回调方法。以支付宝的好友列表为例(好友卡片的样式布局可以看这里),我们来看下ListView.separated
的使用方法:代码(文件地址)
预览
看代码可以知道不同点就在于实现了
separatorBuilder
这个函数,通过它我们可以自定义每个子元素之间的分割线了。2.4 小结
到目前为止,我们一共学习了
ListView
,ListView.build
和ListView.separated
三种创建列表的方式,它们各自都有其适用的场景,所以遇到需求时还是得具体问题具体分析。不过,其实
ListView
还有一个构造函数:ListView.custom
。而且ListView.build
和ListView.separated
最终都是通过ListView.custom
实现的。但是本文并不打算介绍这种方法,因为一般情况下前面提到的三种构造方法就已经足够解决问题了(以后遇到实际问题再研究这个)。3. ListView进阶方法
上文我们介绍了
ListView
的基础用法,但是在实际的产品中,我们还会遇到列表下拉刷新
和上拉加载
等需求。接下来,就让我们学习下Flutter
中应该如何实现此类交互操作。3.1 下拉刷新
要在
Flutter
中实现列表的下拉刷新效果,其实非常简单,因为Flutter
给我们封装好了一个RefreshIndicator
组件,使用起来也非常方便。看下示例代码:由于列表的数据源是可变的,因此这次的组件我们选用继承自
StatefulWidget
。可以看到
RefreshIndicator
的用法十分简单,只要将我们原来的ListView
作为其child,并且实现其onRefresh
方法就好了。而onRefresh
方法其实是刷新完毕通知RefreshIndicator
的一个回调函数。上述代码中,我们模拟了一个1s的等待当做网络请求,然后弹出一个Toast提示"已经是最新数据"(此处的Toast
是安装了toast: ^0.1.3
这个包,Flutter
原生并没有提供)。这里模仿了今日头条的列表UI作为示例(新闻卡片的样式布局可以看这里),我们来看下效果:
可以看到一切都如预期成功执行了,效果还是不错的,而且
RefreshIndicator
使用起来也是非常简便。但是,由于Flutter
封装好的RefreshIndicator
组件可定制性有点弱,不太能够满足大多数app中自定义样式的要求。不过好在看了下RefreshIndicator
的源码并不是很多,等日后学了动画再回头来研究下如何定制一个自定义的下拉刷新组件。3.2 上拉加载
除了下拉刷新之外,上拉加载是经常会遇到的另一种列表操作。不过,这次
Flutter
倒是没有像下拉刷新那样提供现成的组件可以直接调用,上拉加载的交互需要我们自己完成。为此,我们先来简单分析下:list
变量存储当前列表的数据源;bool
型的isLoading
标志位来表示当前是否处于Loading
状态;controller
属性了(ScrollController
可以获取到当前列表的滚动位置以及列表最大滚动区域,相比较即可得到结果);isLoading
置为true
;当数据加载完毕的时候,需要将新的数据合并到list
变量中,并且重新将isLoading
置为false
。根据上面的思路,我们可以得到下面的代码:
其中有一点需要注意,列表的
itemCount
值变成了list.length + 1
,这是因为我们多渲染了一个底部组件
。当不在加载的时候,我们可以展示一个上拉加载更多
的提示性组件;当正在加载数据时,我们又可以展示一个努力加载中...
的占位组件。renderBottom
的实现如下:最后,我们再来看下最终的实现效果:
4. 总结
首先,本文介绍了常用的
ListView
,ListView.build
和ListView.separated
三种构造方法来创建列表,并结合实际的例子加以说明其不同的使用场景。紧接着,又介绍了列表组件下拉刷新
和上拉加载
这两个较常用到的交互操作在Flutter
中应该如何实现。通过文中的5个实际例子,相信你一定已经对
Flutter
中如何使用ListView
有了初步了解,剩下的就是多练习(盘它)咯~本文所有代码托管在这儿,欢迎一起交流学习~