swift和swiftui_SwiftUI中的LazyVGrid和LazyHGrid布局

swift和swiftui

LazyVGrid and LazyHGrid layouts in SwiftUI were recently announced during WWDC 2020, and I’m so excited to share with you a simple tutorial to get you started with them!

SwiftUI中的LazyVGrid和LazyHGrid布局是最近在WWDC 2020期间宣布的，我很高兴与您分享一个简单的教程，让您开始使用它们！

Here’s the demo project to start with.

这是开始的演示项目 。

Note: Using these APIs requires macOS 10.14.5+ and Xcode 12+.

注意：使用这些API需要macOS 10.14.5+和Xcode 12+。

When you open the project, explore the 18 pleasing landscapes in Assets.xcassets, named as noaa[number] for the sake of simplicity. Shoutout to the National Oceanic and Atmospheric Administration (NOAA) for such beautiful pictures.

打开项目时，为简单起见，在Assets.xcassets浏览了18个令人愉悦的景观，命名为noaa[number] 。 向国家海洋与大气管理局(NOAA)喊叫，获得如此精美的照片。

LazyVGrid (LazyVGrid)

From the latest documentation, a LazyVGrid is a “container view that arranges its child views in a grid that grows vertically, creating items only as needed.”

根据最新文档 ，LazyVGrid是“容器视图，将其子视图排列在垂直增长的网格中，仅在需要时创建项目。”

An item in a grid is known as a GridItem, which the documentation states is nothing but a “description of a single grid item, such as a row or a column.” There are many parameters for it.

网格中的一项称为GridItem ， 文档说明该内容不过是“单个网格项的描述，例如行或列”。 有很多参数。

Open the Xcode project inside of the folder LazyVGrid — Beginning. There’s already a file called ImageView, which is to style the beautiful landscapes when showing in a grid.

在文件夹LazyVGrid — Beginning打开Xcode项目。 已经有一个名为ImageView的文件，用于在网格中显示时对美丽的风景进行样式设置。

Create a new SwiftUI View and name it VerticalGrid. A vertical grid takes a few inputs, such as the number of columns, alignment, spacing, etc. The most important is columns. You create a columns variable of the type GridItem and initialize it as an array of flexible repeating items with the count as three. Three represents the number of columns in this case.

创建一个新的SwiftUI View并将其命名为VerticalGrid 。 垂直网格需要一些输入，例如列数，对齐方式，间距等。最重要的是columns 。 您创建一个GridItem类型的columns变量，并将其初始化为一个灵活的重复项数组，其计数为3。 在这种情况下，三表示列数。

The case of flexible(minimum: CGFloat = 10, maximum: CGFloat = .infinity) has a default maximum size of infinity.

对于flexible(minimum: CGFloat = 10, maximum: CGFloat = .infinity) ，默认的最大大小为infinity。

Now, you need a ScrollView flowing in a vertical direction. You provide LazyVGrid with the number of columns and then use ForEach to specify the total of items in the grid.

现在，您需要一个在垂直方向上流动的ScrollView 。 您为LazyVGrid提供列数，然后使用ForEach指定网格中的项目总数。

The number of columns is two in our case, so after filling two images in the first row of ImageView, it moves to the second row and fills the next two images and so on until the grid is complete.

在我们的情况下，列数为2，因此在ImageView的第一行填充了两个图像之后，它移至第二行并填充了下两个图像，依此类推，直到网格完成。

懒人网格 (LazyHGrid)

Create another View and name it HorizontalGrid.

创建另一个View并将其命名为HorizontalGrid 。

The exact same procedure is used for creating aLazyHGrid. Now, you need a ScrollView flowing in a horizontal direction this time.

完全相同的过程用于创建LazyHGrid 。 现在，您需要一次在水平方向上流动的ScrollView 。

You provide LazyHGrid with the number of rows and then use ForEach to specify the total of items in the grid. The number of rows is three in our case, so after filling three images in the first column of ImageView, it moves to the second column.

您为LazyHGrid提供行数，然后使用ForEach指定网格中的项目总数。 在我们的情况下，行数为三，因此在ImageView的第一列中填充三张图像后，它将移至第二列。

To show both grids, replace the content of ContentView with:

要显示两个网格，请将ContentView的内容替换为：

This creates two tabs that you can tap on for the different grid layouts. Running the project gives a beautiful grid of landscapes in both vertical and horizontal directions:

这将创建两个选项卡，您可以点击这些选项卡以使用不同的网格布局。 运行项目可以在垂直和水平方向上给出漂亮的景观网格：

LazyVGrid

LazyVGrid

LazyHGrid

懒人网格

翻译自: https://medium.com/better-programming/lazyvgrid-and-lazyhgrid-layouts-in-swiftui-8e2504544fd9

swift和swiftui