内存分页 物理 分页_在SwiftUI中轻松分页

内存分页 物理 分页

Hi everyone,

嗨，大家好，

In this article, I’ll be sharing a simple and robust method to implement an infinitely scrolling list in SwiftUI with the help of Combine.

在本文中，我将分享一种简单而健壮的方法，以在Combine的帮助下在SwiftUI中实现无限滚动列表。

分页和无限滚动列表的作用 (Pagination and the role of an infinitely scrolling list)

Pagination is a technique that is implemented in backend APIs to save network load by returning only a small number of records divided in a page-wise manner.

分页是一种在后端API中实现的技术，它通过仅返回少量按页面方式划分的记录来节省网络负载。

For example, suppose an API returns the list of users of a system, there can be hundreds of thousands of users. Loading all the users at once won’t only make the network call incredibly slow, but will also waste data of the user. Hence, the industry standard is to return parts of the data in a page-wise manner.

例如，假设一个API返回系统的用户列表，则可以有成千上万的用户。 一次加载所有用户不仅会大大降低网络通话速度，而且还会浪费用户数据。 因此，行业标准是按页面方式返回部分数据。

Since a paginated backend API doesn’t return all the data at once, it has to be implemented in the frontend as well (usually as an infinite scrolling list).

由于分页后端API不会一次返回所有数据，因此它也必须在前端中实现(通常作为无限滚动列表)。

Eg. Instagram uses an infinitely scrolling list to load more posts from the server only when the user scrolls to the bottom (end of list).

例如。 Instagram仅在用户滚动到底部(列表末尾)时，才使用无限滚动列表从服务器加载更多帖子。

Note: I have used ‘Pagination’ and ‘Infinite Scrolling ’ interchangeably in this article.

注意：我在本文中交替使用了“分页”和“无限滚动”。

While ‘Pagination’ is the core concept, ‘Infinite Scrolling’ is the common frontend implementation of it.

“分页”是核心概念，而“无限滚动”是它的常见前端实现。

在SwiftUI中实现 (Implementation in SwiftUI)

In our article, to implement pagination in the app we’ll be using —

在我们的文章中，要在应用程序中实现分页，我们将使用-

1. Xcode 11 and SwiftUI — for the development of our app. Hence, iOS 13 is also supported.
   Xcode 11和SwiftUI-用于开发我们的应用程序。 因此，也支持iOS 13。
2. Combine — for observable model class and to make network requests to the backend API that supports pagination.
   组合—用于可观察的模型类，并向支持分页的后端API发出网络请求。

Let’s get started!

让我们开始吧！

1.无限滚动列表，SwiftUI视图 (1. Infinite Scrolling List, SwiftUI View)

Our infinite scrolling list view comprises of a List inside a Navigation View.

我们的无限滚动列表视图由导航视图内的列表组成。

The List is composed of two parts —

该列表由两部分组成-

1. The Members. This part shows the loaded members using a ForEach loop. Whenever we load new members from the backend, this part grows.
   成员。 此部分使用ForEach循环显示已加载的成员。 每当我们从后端加载新成员时，这部分就会增加。
2. The Activity Indicator. This is always the last cell of the list. It is only shown if there are more members available to be loaded.
   活动指示器。 这始终是列表的最后一个单元格。 仅在有更多成员可加载时显示。

Note: MemberListCell and ActivityIndicator are custom views.

注意：MemberListCell和ActivityIndi​​cator是自定义视图。

On line 19, we have used the onAppear modifier on the activity indicator (implies the user has reached the end of the list) to load more members.

在第19行，我们在活动指示器上使用了onAppear修饰符(暗示用户已到达列表的末尾)来加载更多成员。

Since the spinner is only shown if more members are available to be loaded, its onAppear method is also called and makes a network request only when required. Perfect!

由于仅在有更多成员可加载时才显示微调框，因此也会调用其onAppear方法并仅在需要时发出网络请求。 完善！

2. MemberData模型类+合并 (2. MemberData model class + Combine)

Our infinite scrolling list view uses an object of the MemberData class. This class is responsible to provide the data to the view and load data from the backend.

我们的无限滚动列表视图使用MemberData类的对象。 此类负责将数据提供给视图并从后端加载数据。

The ‘members’ property is published, hence, the view updates automatically when it changes (i.e. list grows seamlessly in the View).

“成员”属性已发布，因此，视图在更改时会自动更新(即，列表在视图中无缝增长)。

Combine has built-in cancellation, and this is incredibly powerful. As I have previously explained in this post, AnyCancellable (line 15, 18) automatically cancels the subscription at suitable times. Hence, Combine makes sure that we do not duplicate network requests, by automatically cancelling them whenever required.

Combine具有内置的取消功能，并且功能非常强大。 正如我之前在这篇文章中解释的那样，AnyCancellable(第15、18行)会在适当的时间自动取消订阅。 因此，合并会通过在需要时自动取消网络请求来确保我们不会重复网络请求。

This ensures that if the user scrolls and hides/shows the activity spinner multiple times, we do not make unnecessary network calls and our list data doesn’t get corrupted with duplicate/wrong data. It all works perfectly!

这样可以确保如果用户多次滚动和隐藏/显示活动微调器，我们将不会进行不必要的网络调用，并且列表数据不会因重复/错误数据而损坏。 一切都完美！

We’re done! Pagination has been implemented :)

大功告成！ 分页已实现:)

Mentorship iOS app 导师制iOS应用中的无限滚动

结论 (Conclusion)

We’ve successfully implemented infinite scrolling in SwiftUI for a pagination enabled backend API.

我们已成功在SwiftUI中实现了启用分页的后端API的无限滚动。

< It looks something like this

<看起来像这样

The Combine framework plays a vital role in the development of SwiftUI apps, usually to make model classes observable.

Combine框架在SwiftUI应用程序的开发中起着至关重要的作用，通常使模型类可观察。

We’ve also used Combine to make network calls in conjunction with URLSession, and have taken advantage of its built-in cancellation (AnyCancellable) to keep the user experience seamless and error-free.

我们还使用Combine结合URLSession进行网络调用，并利用其内置的取消功能(AnyCancellable)来保持用户体验的无缝和无错。

The internet is filled with a lot of complex methods to implement infinite scrolling in SwiftUI (especially for Xcode 11).

互联网充满了许多复杂的方法来在SwiftUI中实现无限滚动(特别是对于Xcode 11)。

I would like to thank my GSoC20 Mentor, Vatsal, for telling me about this neat, simple, and robust method to implement it.

我要感谢我的GSoC20导师Vatsal向我介绍了这种精巧，简单而强大的实现方法。

感谢您的阅读！ (Thank You for Reading!)

Please feel free to reach out to me and connect, check out our projects, or join our open source community: LinkedIn, GitHub, Mentorship iOS, AnitaB.org Community

请随时与我联系并联系，签出我们的项目或加入我们的开源社区： LinkedIn ， GitHub ， Mentorship iOS ， AnitaB.org社区

翻译自: https://medium.com/swlh/easy-pagination-in-swiftui-da9e1fe3e25e

内存分页 物理 分页