Flutter ListView 和 ScrollPhysics 之详解

Flutter ListView 和 ScrollPhysics 之详解本文旨在对 ListView 类、ScrollPhysics 以及通用小部件的调整和优化进行更详细的探索。Flutter 中的 ListView

大家好,欢迎来到IT知识分享网。

Flutter ListView 和 ScrollPhysics 之详解

本文旨在对 ListView 类、ScrollPhysics 以及通用小部件的调整和优化进行更详细的探索。
Flutter 中的 ListView 是可滚动的线性列表。我们可以使用它来制作可滚动的项目列表或制作重复项目的列表。

探索 ListView 的类型

我们将从查看 ListView 的类型开始,然后查看其他功能和对其进行的巧妙修改。

我们来看看 ListView 的类型有:

  • 列表显示
  • ListView.builder
  • ListView.separated
  • ListView.custom
    让我们一一探索这些类型:

ListView

这是 ListView 类的默认构造函数。 ListView 只需要一个子列表并使其可滚动。

Flutter ListView 和 ScrollPhysics 之详解

代码的一般格式是:

ListView( children: <Widget>[ ItemOne(), ItemTwo(), ItemThree(), ], ),

通常这应该与少量子项一起使用,因为 List 也会在列表中构造不可见的元素,并且大量元素可能会导致效率低下。

ListView.builder()

builder() 构造函数构造一个重复的项目列表。构造函数有两个主要参数:一个 itemCount 用于列表中的项目数,一个 itemBuilder 用于构造每个列表项。

Flutter ListView 和 ScrollPhysics 之详解

代码的一般格式是:

ListView.builder( itemCount: itemCount, itemBuilder: (context, position) { return listItem(); }, ),

列表项是惰性构建的,这意味着仅构建特定数量的列表项,当用户向前滚动时,较早的列表项将被销毁。

巧妙的技巧:由于元素是延迟加载的,并且只加载了所需数量的元素,因此我们实际上不需要 itemCount 作为强制参数,并且列表可以是无限的。

ListView.builder( itemBuilder: (context, position) { return Card( child: Padding( padding: const EdgeInsets.all(16.0), child: Text(position.toString(), style: TextStyle(fontSize: 22.0),), ), ); }, ),
Flutter ListView 和 ScrollPhysics 之详解

ListView.separated()

在 separator() 构造函数中,我们生成一个列表,我们可以指定每个项目之间的分隔符。

Flutter ListView 和 ScrollPhysics 之详解

本质上,我们构造了两个交织的列表:一个作为主列表,一个作为分隔列表。
请注意,这里不能使用前面构造函数中讨论的无限计数,并且此构造函数强制使用 itemCount。
这种类型的代码如下:

ListView.separated( itemBuilder: (context, position) { return ListItem(); }, separatorBuilder: (context, position) { return SeparatorItem(); }, itemCount: itemCount, ),

这种类型的列表允许您动态定义分隔符,为不同类型的项目设置不同类型的分隔符,在需要时添加或删除分隔符等。

此实现还可用于轻松插入其他类型的元素(例如广告),而无需对列表项中间的主列表进行任何修改。

Flutter ListView 和 ScrollPhysics 之详解

注意:分隔符列表长度需要比项目列表小1,因为在最后一个元素之后不存在分隔符。

ListView.custom()

顾名思义,custom() 构造函数可让您构建具有自定义功能的 ListViews,以了解如何构建列表的子项。为此所需的主要参数是构建项目的 SliverChildDelegate。
SliverChildDelegates 的类型是

  • SliverChildListDelegate
  • SliverChildBuilderDelegate

SliverChildListDelegate 接受子级的直接列表,而 SliverChildBuiderDelegate 接受 IndexedWidgetBuilder(我们使用的构建器函数)。
您可以使用或子类化这些来构建您自己的委托。

ListView.builder 本质上是一个带有 SliverChildBuilderDelegate 的 ListView.custom。

ListView 默认构造函数的行为类似于带有 SliverChildListDelegate 的 ListView.custom。
现在我们已经完成了任务 ListViews 的类型,让我们来看看 ScrollPhysics。

探索 ScrollPhysics

为了控制滚动发生的方式,我们在 ListView 构造函数中设置了物理参数。
不同类型的物理是:

NeverScrollableScrollPhysics
NeverScrollableScrollPhysics 使列表不可滚动。使用它来完全禁用 ListView 的滚动。

BouncingScrollPhysics
BouncingScrollPhysics 在列表结束时弹回列表。这种效果在iOS上比较常见。

Flutter ListView 和 ScrollPhysics 之详解

ClampingScrollPhysics
这是 Android 上次使用的是默认滚动物理。该列表在最后停止并给出指示它的效果。

Flutter ListView 和 ScrollPhysics 之详解

FixedExtentScrollPhysics
这与此列表中的其他内容略有不同,因为它仅适用于 FixedExtendScrollControllers 和使用它们的列表一样。例如,我们将采用 ListWheelScrollView 来制作一个类似轮子的列表。
FixedExtentScrollPhysics 仅滚动到项目而不是两者之间的任何偏移量。

Flutter ListView 和 ScrollPhysics 之详解

这个例子的代码非常简单:

FixedExtentScrollController fixedExtentScrollController = new FixedExtentScrollController(); ListWheelScrollView( controller: fixedExtentScrollController, physics: FixedExtentScrollPhysics(), children: monthsOfTheYear.map((month) { return Card( child: Row( children: <Widget>[ Expanded( child: Padding( padding: const EdgeInsets.all(8.0), child: Text( month, style: TextStyle(fontSize: 18.0), ), )), ], )); }).toList(), itemExtent: 60.0, ),

还有一些事情要知道

如何使被破坏的元素在列表中保持活跃?

Flutter 提供了一个 KeepAlive() 小部件,它可以让一个本来会被销毁的项目保持活动状态。在列表中,元素默认被包装在 AutomaticKeepAlive 小部件中。

Flutter ListView 和 ScrollPhysics 之详解

可以通过将 addAutomaticKeepAlives 字段设置为 false 来禁用 AutomaticKeepAlives。这些元素需要保持活动状态或 KeepAlive 的自定义实现的情况下很有用。

为什么我的 ListView 在列表和外部小部件之间有空间?

默认情况下,ListView 在它和外部小部件之间有填充,要删除它,请将填充设置为 EdgeInsets.all(0.0)。

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/46524.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信