百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 文章教程 > 正文

Flutter ListView 和 ScrollPhysics 之详解

xsobi 2024-11-26 10:13 19 浏览

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

探索 ListView 的类型

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

我们来看看 ListView 的类型有:

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

ListView

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

代码的一般格式是:

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

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

ListView.builder()

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

代码的一般格式是:

Bash
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),),
      ),
    );
  },
),

ListView.separated()

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

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

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

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

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

注意:分隔符列表长度需要比项目列表小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上比较常见。

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

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

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

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 小部件中。

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

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

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

相关推荐

不要过度使用列表(List): C# 数据结构

编程中的每一个决定都会对性能和清晰度产生无声的影响。在C#中,这样重要的选择之一就是选择正确的数据结构。数据结构是基础支柱。这些结构是数据生存、呼吸和交互的地方,决定了代码的效率和可读性。但...

Power Query中使用List.Accumulate函数做分组操作

在Excel中对于分数评级,最简单快捷的办法就是用VLOOKUP函数了,评级的条件可以使用做好的评级表格,也可以直接用数组写在公式内部。或者这样:在PowerQuery中我们用什么办法才能做到这样的...

C#夯实基础-Lambda在List中的使用

在C#中基本类型比如List,Dictionary,数组等都有委托来实现相关的操作。此时Lambda表达式就可以使用了.实例1,查找字符串List的包含a的元素代码//字符串型的listList&...

JAVA中ArrayList、LinkedList及CopyOnWriteArrayList实现原理

ArrayList,LinkedList的存储性能和特性?1、是否保证线程安全:ArrayList和LinkedList都不保证线程安全,如果要线程安全用CopyOnWriteArrayLis...

js将list转化为tree格式的几种写法

最近在考虑一个树状结构存储。最终需要将list转化为tree格式源数据示例源数据共401条[{"menuId":"5f50c5fb8f0d74536bbfb7a4"...

列表框(List Box)之应用实例(列表框方法)

【分享成果,随喜正能量】人生是需要等候的,等候一阵风的拂过,等候一朵花的盛开,等候伊人的到来,等候生命爆发的强音。心灵是需要在等候中坚守的,坚守无风的日月,坚守落花的寂寞,坚守情感的空白,坚守生活的平...

不会用list的程序员不是好程序员,C++标准容器list类实例详解

C++中的list(列表)是顺序容器,其中存储的元素并不是内存连续的,这一点和上一节讨论的deque是类似的。list容器类的特点稍后几节将要讨论的C++中的vector(向量)容器中的元素...

CopyOnWriteArrayList 读写分离,弱一致性

为什么会有CopyOnWriteArrayList?我们知道ArrayList和LinkedList实现的List都是非线程安全的,于是就有了Vector,它是基于ArrayList的线程安全集合,但...

Java 中List 和数组之间互相转换的方法

在Java中,List和数组之间的互相转换是非常常见的操作。以下是常用的方法及其示例代码:1.数组转List方法1:使用Arrays.asList()特点:返回的List是一个固定大小...

VBA数组进阶调用.NET ArrayList(vba function 数组参数)

之前很多文章都讲过VBA数组。但是VBA数组比较鸡肋,功能比较弱,使用起来不是很方便,需要自行封装很多数组方法,这对于新手来说很不友好。今天给大家讲讲,怎么用.Net自带的ArrayList扩展VBA...

面试官-如何实现数组和 List 之间的转换?

数组和List是Java开发中常见的两种数据结构,那么如何实现二者之间的快速转换就成了面试官常问的考点之一,下面我们我们就来从数组转List和List转数组两个方面来展开介绍一下。数组转List方法...

Java 如何在 Array 和 List 之间进行转换

概述在本文章中,我们对如何在Java中对Array和List进行转换进行一些说明和示例。这些示例通过使用CoreJava和一些第三方的转换工具,例如Guava和ApacheC...

Excel 进阶教程:ArrayList + VBA,轻松搞定复杂数据统计

在VBA(VisualBasicforApplications)中,ArrayList是一个动态数组对象,它提供了比普通VBA数组更强大的功能。ArrayList是.NETFram...

Java并发工具:CopyOnWriteArrayList

CopyOnWriteArrayList是Java中java.util.concurrent包提供的一种线程安全的List实现。它特别适用于读多写少(Read-mostly)的并发场景,...

一起来聊聊Java中的ArrayList(java arrays.aslist)

提起ArrayList相信对于java开发人员来说并不会感到陌生,甚至会有种亲切感。好像每次出去面试,多多少少都会跟它扯上点关系。所以导致网上以及各大培训机构都对其源码有着丰富的解读。但是,本篇文章并...