swiftui_swiftui的lazyhgrids

swiftui

At the recent WWDC 2020, Apple introduced a LazyHGrid. A lot of developers found that SwiftUI was missing the support of CollectionView when it was first introduced. With the release of LazyHGrid, you may now mimic the same behaviour as UICollectionView in UIKit.

在最近的WWDC 2020上，苹果推出了LazyHGrid 。 许多开发人员发现，SwiftUI首次引入时就缺少对CollectionView的支持。 随着LazyHGrid的发布，您现在可以模仿与UIKit中的UICollectionView相同的行为。

“A container view that arranges its child views in a grid that grows horizontally, creating items only as needed.” — Apple Developer

“容器视图将其子视图排列在水平增长的网格中，仅在需要时创建项目。” - 苹果开发商

先决条件 (Prerequisites)

To follow along with this tutorial, you’ll need some basic knowledge in:

要继续学习本教程，您将需要一些基本知识：

• Swift
  Swift
• At least Xcode 12+
  至少Xcode 12+

Note: This only supports iOS 14+.

注意：这仅支持iOS 14+。

LazyHGrid入门 (Getting Started With LazyHGrid)

As you probably noticed, the Lazy prefix basically indicates that the view is only rendered when it appears on the screen, which boosts performance. You don't want to load all 1,000 data at the same time. With LazyHGrid, you only load however many data that appear on the screen.

您可能已经注意到， Lazy前缀基本上表示仅当视图出现在屏幕上时才渲染视图，从而提高了性能。 您不想同时加载所有1,000个数据。 使用LazyHGrid ，您只能加载屏幕上出现的许多数据。

To make things more interesting, let’s make up a storyline. Tesla is having a competition to hire an iOS engineer, and they have opened the submission up to everyone. You love Tesla and want to be part of the team.

为了使事情变得更有趣，让我们组成一个故事情节。 特斯拉(Tesla)正在竞争聘请iOS工程师的竞赛，他们已经向所有人开放了该提交。 您热爱特斯拉，并希望成为团队的一员。

So you decide to use SwiftUI and LazyHGrid to impress them.

因此，您决定使用SwiftUI和LazyHGrid来打动他们。

You will first need to configure the layout, and you can use GridItem to do that. GridItem basically lets you configure the size and grid properties:

您首先需要配置布局，然后可以使用GridItem进行配置。 GridItem基本上允许您配置size和grid属性：

var gridItems: [GridItem] = [GridItem()]

Next, you will create LazyHGrid, which is embedded inside ScrollView for scrolling purposes.

接下来，您将创建LazyHGrid ，将其嵌入ScrollView以进行滚动。

As you can see, the images stored inside Assets.xcassets are basically named 1, 2, 3, 4…

正如你所看到的，里面存放的图像Assets.xcassets基本上命名为1 ， 2 ， 3 ， 4 ...

Voila.

瞧

自定义行 (Customising Rows)

With the configuration above, there is only one row. Adding rows is made easier on SwiftUI and can be done with just the addition of one line of code. Simply modify your gridItems to the following:

使用上面的配置，只有一行。 在SwiftUI上，添加行变得更加容易，并且只需添加一行代码即可完成。 只需将您的gridItems修改为以下内容：

var gridItems: [GridItem] = [GridItem(), GridItem()]

And you will now see two rows. If you wish to have more rows, you may add them at your own discretion. By default, GridItem uses flexible(minimum: CGFloat = 10, maximum: CGFloat = .infinity).

现在您将看到两行。 如果希望有更多行，可以自行决定添加它们。 默认情况下， GridItem使用flexible(minimum: CGFloat = 10, maximum: CGFloat = .infinity) 。

定制尺寸 (Customising Size)

You may even play with the size of the grid by using GridItem.Sizes, which include fixed, adaptive, and flexible.

您甚至可以通过使用GridItem.Sizes来处理网格的大小，包括fixed ， adaptive和flexible 。

With fixed, you will be able to give the item a specified height. The code below basically indicates that the first row’s height is 200 and the following row’s height is 400.

使用fixed ，您将能够为项目指定指定的高度。 下面的代码基本上指示第一行的高度为200，第二行的高度为400。

var gridItems: [GridItem] = [GridItem(.flexi(200)),
                             GridItem(.fixed(400))]

With flexible, you will be able to set a minimum and maximum height. Here, you can even mix some of the other GridItem.Sizes:

使用flexible ，您将能够设置最小和最大高度。 在这里，您甚至可以混合其他一些GridItem.Sizes ：

var gridItems: [GridItem] = [GridItem(.flexible(minimum: 100, maximum: 300)),
                             GridItem(.fixed(400))]

With adaptive, LazyHGrid will determine how many rows are needed by checking the height of each item:

使用adaptive ， LazyHGrid将通过检查每个项目的高度来确定需要多少行：

var gridItems: [GridItem] = [GridItem(.adaptive(minimum: 150, maximum: 400))]

Here, the height of each item is re-adjusted with the following. And with adaptive, it just calculates how many rows are to be created:

在此，每个项目的高度通过以下方法重新调整。 并使用adaptive ，它仅计算要创建多少行：

.frame(width: 200, height: 150, alignment: .center)

Let’s not get distracted by the customisation. Instead, let’s send our submission to Tesla’s website and hope that we get selected.

让我们不要因定制而分心。 相反，让我们将提交的内容发送到特斯拉的网站，希望我们被选中。

翻译自: https://medium.com/better-programming/lazyhgrids-in-swiftui-aced42336f8

swiftui