ListView，RadListView 和 Repeater-为什么需要三个？

·

Repeater 是与 NativeScript Core 框架相关的小部件。在 Angular 中有 ngFor，在 Vue 中有 v-for。尽管它们在实现上并不完全相同，但它们具有相同的目的。

NativeScript 提供了三种创建数据绑定列表的官方方法。如果您来自 Web 开发背景，并且是 NativeScript 的新手，那么这可能会令人困惑。当我第一次开始使用 NativeScript 时，这是我最困惑的两件事之一，另一件事是布局系统。

TIP

提示：请访问 nslayouts.com (opens new window)，以轻松地学习 NativeScript 布局系统！

在网络上，您可能希望有一种基本的方法来创建来自框架的数据列表，然后拥有大量与自定义功能捆绑在一起的第三方插件。这是一个明显的区别-您可以随便选择基本的实现并在其基础上构建，也可以选择其他开发人员已经构建的“更好”的一种。但是，在 NativeScript 中，有三个官方小部件。这里有很多问题：

使用哪一个？哪一个是最好的？有没有最好的一个？我为什么需要三个？

现在，命名或文档中的任何内容都无法提供明确的答案。解决这些问题的唯一方法是经验。如果您仔细检查小部件的 API 并使用它们足够长的时间，您会感觉到何时使用它们。即使那样，仍然会存在疑问。这篇博客文章的目的是提供答案并将其与实际示例结合起来。如果您是 NativeScript 的新手，它应该可以指导您正确的方向。如果您已经有经验，则可以至少确认您的理解（或最深的恐惧）。

在我们深入研究实际示例之前，我相信对小部件的简要介绍是适当的。这三者都有自己的文档，所以我想我可以提供一些替代的文档。

ListView-尊贵的绅士

这是一个简单而优雅的小部件，可让您创建在杂志中看到的漂亮列表。它的主要座右铭是“质量高于数量”，它并不关心这些尚未经受时间考验的新颖的实验 UX 功能。它选择了坚持经典并做得很好。诚然，这种设计决定使它感觉有些过时，并使其脱离最佳 UX 的闪存。尽管它不是最时尚，但在每个移动应用程序中仍具有稳定的位置。当然，作为一个内心的绅士，它仍然保持高尚的举止，因此如果您想扩展它，它将发挥良好（前提是您具备做到这一点的技能）。这为想要向其添加一些奇特的东西的第三方插件奠定了良好的基础。

它ListView是 NativeScript 核心模块（tns-core-modules软件包）的一部分，这意味着它与框架一起提供。在底层，它是基本本机列表控件的薄包装（UITableView在 iOS 和ListViewAndroid上）。它的所有功能都来自本机实现。它确实是快速且经过优化的，因此如果您的应用主要针对低端设备，则它是更好的选择。它具有三个功能：

• UI 虚拟化
• 数据虚拟化
• 多个模板

UI 虚拟化是此小部件提供快速滚动的原因。虚拟化是移动应用程序列表的事实上的标准。缺点是本机窗口小部件无法提供将其关闭的方法。这就产生了ListView必须处理自己的滚动并使其正常工作的必要性，必须为其提供明确的可用空间或大小。这意味着它在布局方面有一些特定要求，最终限制了其设计选项。对于那些以列表为中心的页面，其中大部分内容都被列表填充，它是一个完美的组件。

RadListView-瑞士军刀家伙

谁不喜欢一个为您遇到的每一个问题提供解决方案的人？就像瑞士军刀一样，它RadListView提供了您所有喜欢的功能以及更多功能。它甚至具有您无法分辨它们的用途的功能，但是当需要时，您将为它们感到感谢。这RadListView确实是三者中最酷的之一。它使您可以立即创建真正令人惊奇的列表体验。感觉就像黑魔法。可悲的是，黑魔法是有代价的。您知道“万事通，万事通”的说法，但不幸的是，这也确实适用RadListView，主要是在性能上。尽管如此，在当今时代，创造令人敬畏的体验通常比单纯的效率要重要。

RadListView是一个插件（nativescript-ui-listview软件包），这意味着您必须在项目中单独安装它。在后台，它以大量的自定义代码构建在本机实现上。如果ListView通过省略两个平台都不具备的功能来提供跨平台 API，则 RadListView方法是使用自定义实现来填补空白。结果是它提供了许多功能，但也变得更加复杂且容易出错。与一样ListView，它提供了您无法关闭的 UI 虚拟化，因此在设计灵活性方面也存在着固有的问题。

列出所有RadListView可以做的事情真的很难。它们的范围从 UX 功能（如滑动操作和拉动刷新）到数据操作和模板。我建议您检查一下文档和此博客文章。尽管该博客文章有些过时，但仍然非常相关。

值得一提的是，它RadListView和其余的 Professional NativeScript UI 插件都不是开源的，但是有一个 NDA，您可以签名并获得访问权限并对它做出贡献。查看此处的说明，了解如何执行此操作。

直放站-勤奋的杰克

最后，必须有人完成工作。没有人真正喜欢谈论它，Repeater因为我们都专注于用户体验，但是我们只是害怕承认它实际上是每个应用程序的支柱。它着重于上面那些过高的辊子不会在意的著名工作-可维护性。如果您需要重复多次以便可以正常复制粘贴，Repeater则小部件为。

在Repeater自带的tns-core-modules包，可能是唯一部件在那里，不换一个本地 SDK 插件。它实际上是 NativeScript Core 框架的一部分，其目的是提供与 Angular *ngFor和 Vue v-for指令等效的功能。这也意味着如果您使用这些框架之一，则不需要它。只需使用自己的实现即可。此外，此处提到的所有内容也适用于*ngFor和v-for。

这样做的主要好处Repeater是，它是创建没有 UI 虚拟化，因此没有内部滚动的数据列表的唯一方法。这意味着您可以轻松组合Repeaters以实现更加灵活的构图和设计。一个简单的经验法则是，如果必须在同一页面上显示多个列表，Repeater则这可能是最好的解决方案。的缺点Repeater是它无法处理大型数据集。它没有进行虚拟化，因此必须测量所有数据项模板，这需要时间。您可以使用的推荐项没有具体数目，因为它很大程度上取决于绑定和模板的复杂性。可以说，如果您使用遇到性能问题Repeater，则应该尝试使用ListView或RadListView代替。

同样，为什么是三个？

总而言之，NativeScript 提供了三个非常不同的具有各自个性的小部件：

• 的Repeater，类似于*ngFor和v-for在角和 Vue 公司，来自于框架。它的主要优点是它不是虚拟化的，可以在中安全使用ScrollView。中继器非常适合小型列表和组合列表。
• 在ListView来自原生 SDK 和一个简单的包装，提供了跨平台的 API。真的很棒。它在简单的经典场景中闪耀。同样，对低端设备更好。
• 该RadListView是有很多的自定义代码内置的插件。它提供了一套丰富的功能，这些功能很难由您自己实现。RadListView专为这些情况而设计，您希望拥有一个具有很多交互性的列表。

这三个都很重要，并且在移动应用程序中都有自己的位置。让我们观察一些实际的例子。

例子

有时一个示范值一千字。在下面，您可以找到一些常见的场景以及有关在哪种情况下最好的小部件的说明。请记住，此博客不是关于如何实现这些示例的内容，因此这里没有详细的步骤。相反，我将提供指向 NativeScript Playground 中的示例的链接，您可以在其中部署并在设备上尝试它们。为简单起见，所有示例均通过带有 TypeScript 的 NativeScript Core 框架实现。

选择一个东西-使用 ListView

记住，这就是为什么首先制造移动设备的原因？从您的联系人列表中选择一个人并打个电话。不需要花哨的注意力。这可能是您应用中的二级或三级页面。

挑选一件东西 GIF

这是经典的方案，ListView是最佳选择。RadListView这将是一个过大的杀伤力，您无法控制数据集的大小，因此这Repeater不是一个好选择。浏览代码并通过在 Playground 上访问此应用程序在手机上签出： 选择事物游乐场示例

简单首页-使用 ListView 或 RadListView

让我们看看我们如何做诸如头版新闻提要之类的事情。

简单首页ListView GIF

核心模块 ListView 在这里仍然是一个选项，我们可以从其性能中受益。它还提供了多个模板选项，因此我们可以通过为其提供不同的更大模板来提供特色新闻。还可以通过“加载更多项目”机制进行数据虚拟化，因此，如果用户向下滚动，我们可以获取更多新闻。这里没有真正的交互性需求。是唯一缺少的就是“拉刷新”功能，你可以从这样一个单独的插件得到它- 拉刷新插件从布拉德·马丁。在 Playground 中查看示例： News Feed ListView Playground 示例

或者，您可以选择RadListView。根据您的模板布局，它的性能可能会稍差一些，但是它内置了“刷新”功能，如果您计划将来扩展它以提供更多功能，它将更加容易。在这种情况下，这是一个选择问题。我会说-与一起使用RadListView，但请记住，可能会有一个性能更高的选择。这是设备上的外观。基本上是相同的，但是请注意，这次我们可以立即使用刷新功能。

简单首页 RadListView GIF

这是 Playground 中的示例： News Feed RadListView Playground 示例

交互式列表-使用 RadListView

假设我们要建立一个交互式店面。我们希望客户在屏幕上看到尽可能多的项目，并且希望将它们尽可能多地保留在此屏幕上。

店面RadListView GIF

在此示例中，我们具有滑动动作，过滤和不同的布局以及不同的模板。这是一个工作RadListView。可以使用其他两个列表实现此功能，但是这将花费您更多的时间和精力，最终，性能可能不会那么好。这里捆绑了很多功能，因此请查看示例： 店面 RadListView 游乐场示例

应用程序菜单-中继器

应用菜单项通常是在应用代码中定义的，作为开发人员，您可以完全控制它们。它们通常并不多-具有 1000 个菜单的菜单对用户来说不是很友好。此外，菜单往往具有更多的奢侈设计，并且更改频率更高。

菜单中继器 GIF

此示例在顶部显示图标，在下面显示应用程序菜单和配置文件菜单。使用Repeaters，我们可以将数据分成三个列表，一分为三Repeaters，并将它们全部包装在一个列表中ScrollView。这是一个简单而灵活的解决方案。这里还有两个不同的分隔符，其中一个包含配置文件信息。相信我，用 a ListView或 a 来实现它非常困难RadListView。在此处查看示例： 菜单游乐场示例

结论

首先，使用三个选项来创建数据绑定列表似乎有些令人困惑，但是它们各有优缺点。在给定的方案中使用正确的选项可能会节省您的开发时间和很多麻烦。我们可以根据上面的示例提取一些简单的规则：

• 许多数据项-使用ListView或RadListView。
• 固定合理数量的数据项-使用Repeater。
• 交互式功能-使用RadListView。
• 单个屏幕上有多个大型列表-返回以进行 UX 检查。

我希望这篇博文有助于您踏上正确的道路。如果您有一个此处未涉及的方案，并且您不确定要使用哪个列表，请在下面添加注释。我很乐意讨论。