SwiftUI Essentials

SwiftUI要点

Creating and Combining Views

• 创建和组合视图

This tutorial guides you through building Landmarks — an iOS app for discovering and sharing the places you love. You’ll start by building the view that shows a landmark’s details.
To lay out the views, Landmarks uses stacks to combine and layer the image and text view components. To add a map to the view, you’ll include a standard MapKit component. As you refine the view’s design, Xcode provides real-time feedback so you can see how those changes translate into code.
Download the project files to begin building this project, and follow the steps below.

本教程将指导您构建标记 - 一个用于发现和分享您喜爱的地方的iOS应用程序。 您将首先构建显示地标详细信息的视图。
为了布局视图，地标使用堆栈来组合和分层图像和文本视图组件。 要向视图添加地图，您将包含标准MapKit组件。 在细化视图的设计时，Xcode提供实时反馈，以便您可以看到这些更改如何转换为代码。
下载项目文件以开始构建此项目，并按照以下步骤操作。

Section 1

第1节

Create a New Project and Explore the Canvas

• 创建一个新项目并探索画布

Create a new Xcode project that uses SwiftUI. Explore the canvas, previews, and the SwiftUI template code.

• 创建一个使用SwiftUI的新Xcode项目。 浏览画布，预览和SwiftUI模板代码。

To preview and interact with views from the canvas in Xcode, ensure your Mac is running macOS 10.15 beta.

• 要预览Xcode中画布中的视图并与之交互，请确保您的Mac正在运行macOS 10.15 beta。

Step 4

• 第4步

In the Project navigator, click to select ContentView.swift.

• 在项目导航器中，单击以选中ContentView.swift。

By default, SwiftUI view files declare two structures. The first structure conforms to the View protocol and describes the view’s content and layout. The second structure declares a preview for that view.

• 默认情况下，SwiftUI视图文件声明了两个结构体。 第一个结构提符合View协议，描述了视图的内容和布局。 第二个结构体声明该视图的预览。

Step 5

In the canvas, click Resume to display the preview.

• 在画布中，单击“恢复”以显示预览。

Tip
If the canvas isn’t visible, select Editor > Editor and Canvas to show it.

• 如果画布不可见，请选择“编辑器”>“编辑器”和“画布”以显示它。

Step 6

Inside the body property, change “Hello World” to a greeting for yourself.

• 在body属性中，将“Hello World”更改为自己的问候语。

As you change the code in a view’s body property, the preview updates to reflect your changes.

• 当您更改视图的body属性中的代码时，预览会更新以反映您的更改。

Section 2

• 第2节

Customize the Text View

• 自定义文本视图

You can customize a view’s display by changing your code, or by using the inspector to discover what’s available and to help you write code.

• 您可以通过更改代码或使用检查器发现可用内容并帮助您编写代码来自定义视图的显示。

As you build the Landmarks app, you can use any combination of editors: the source editor, the canvas, or the inspectors. Your code stays updated, regardless of which tool you use.

• 在构建Landmarks应用程序时，您可以使用任何编辑器组合：源编辑器，画布或检查器。 无论您使用哪种工具，代码都会保持更新。

Next, you’ll customize the text view using the inspector.

• 接下来，您将使用检查器自定义文本视图。

Step 1

In the preview, Command-click the greeting to bring up the structured editing popover, and choose Inspect.

• 在预览中，按住Command键并单击问候语以显示结构化编辑弹出窗口，然后选择“检查”。

The popover shows different attributes that you can customize, depending on the type of view you inspect.

• 弹出窗口显示您可以自定义的不同属性，具体取决于您检查的视图类型。

Step 2

Use the inspector to change the text to “Turtle Rock”, the name of the first landmark you’ll show in your app.
-使用检查器将文本更改为“Turtle Rock”，即您将在应用中显示的第一个地标的名称。

Step 3

Change the Font modifier to Title.

• 将“字体”修改器更改为“标题”。

This applies the system font to the text so that it responds correctly to the user’s preferred font sizes and settings.

• 这将系统字体应用于文本，以便它正确响应用户的首选字体大小和设置。

Step 4

Edit the code by hand to add the .color(.green) modifier; this changes the text’s color to green.

• 手动编辑代码以添加.color（.green）修饰符; 这会将文本的颜色更改为绿色。

To customize a SwiftUI view, you call methods called modifiers. Modifiers wrap a view to change its display or other properties. Each modifier returns a new view, so it’s common to chain multiple modifiers, stacked vertically.

• 要自定义SwiftUI视图，请调用称为修饰符的方法。 修改器包装视图以更改其显示或其他属性。 每个修改器都返回一个新视图，因此链接垂直堆叠的多个修改器是很常见的。

Your code is always the source of truth for the view. When you use the inspector to change or remove a modifier, Xcode updates your code immediately to match.

• 您的代码始终是视图的真实来源。 当您使用检查器更改或删除修改器时，Xcode会立即更新您的代码以匹配。

Step 5

This time, open the inspector by Command-clicking on the Text declaration in the code editor, and then choose Inspect from the popover.

• 这次，通过在代码编辑器中单击文本声明来打开检查器，然后从弹出框中选择Inspect。

Click the Color pop-up menu and choose Inherited to change the text color to black again.

• 单击“颜色”弹出菜单，然后选择“继承”以再次将文本颜色更改为黑色。

Step 6

Notice that Xcode updates your code automatically to reflect the change, removing the color(.green) modifier.

• 请注意，Xcode会自动更新代码以反映更改，删除颜色（.green）修饰符。

Section 3

• 第3节

Combine Views Using Stacks

• 使用堆栈组合视图

Beyond the title view you created in the previous section, you’ll add text views to contain details about the landmark, such as the name of the park and state it’s in.

• 除了您在上一部分中创建的标题视图之外，您还将添加文本视图以包含有关地标的详细信息，例如公园的名称和状态。

When creating a SwiftUI view, you describe its content, layout, and behavior in the view’s body property; however, the body property only returns a single view. You can combine and embed multiple views in stacks, which group views together horizontally, vertically, or back-to-front.

• 在创建SwiftUI视图时，您可以在视图的body属性中描述其内容，布局和行为; 但是，body属性仅返回单个视图。 您可以在堆栈中组合和嵌入多个视图，这些视图将视图水平，垂直或从后到前组合在一起。

In this section, you’ll use a vertical stack to place the title above a horizontal stack that contains details about the park.

• 在本节中，您将使用垂直堆栈将标题置于包含公园详细信息的水平堆栈上方。

You can use Xcode’s structured editing support to embed a view in a container view, open an inspector, or help with other useful changes.

• 您可以使用Xcode的结构化编辑支持将视图嵌入容器视图，打开检查器或帮助进行其他有用的更改。

Step 1

Command-click the text view’s initializer to show the structured editing popover, and then choose Embed in VStack.

• 按住Command键并单击文本视图的初始值设定项以显示结构化编辑弹出窗口，然后选择“嵌入VStack”。

Next, you’ll add a text view to the stack by dragging a Text view from the library.

• 接下来，您将通过从库中拖动文本视图将文本视图添加到堆栈。

Step 2

Open the Library by clicking the plus button (+) at the top-right of the Xcode window, and then drag a Text view to the place in your code immediately after the “Turtle Rock” text view.

• 单击Xcode窗口右上角的加号按钮（+）打开库，然后在“Turtle Rock”文本视图后立即将Text视图拖到代码中的位置。

Step 3

Replace the Text view’s placeholder text with Joshua Tree National Park.

• 用Joshua Tree National Park替换文本视图的占位符文本。

Customize the location to match the desired layout.

• 自定义位置以匹配所需的布局。

Step 4

Set the location’s font to .subheadline.

• 将位置的字体设置为.subheadline。

Step 5

Edit the VStack initializer to align the views by their leading edges.

• 编辑VStack初始值设定项以按前导对齐视图。

By default, stacks center their contents along their axis and provide context-appropriate spacing.

• 默认情况下，堆栈将其内容沿其轴居中，并提供适合上下文的间距。

Next, you’ll add another text view to the right of the location, this for the park’s state.

• 接下来，您将在该位置的右侧添加另一个文本视图，这是该公园的状态。

Step 6

In the canvas, Command-click on Joshua Tree National Park, and choose Embed in HStack.

• 在画布上，按住Command键点击Joshua Tree National Park，然后选择嵌入HStack。

Step 7

Add a new text view after the location, change the placeholder text to the park’s state, and then set its font to .subheadline.

• 在位置后添加新的文本视图，将占位符文本更改为park的状态，然后将其字体设置为.subheadline。

Step 8

To direct the layout to use the full width of the device, separate the park and the state by adding a Spacer to the horizontal stack holding the two text views.

• 要指示布局使用设备的整个宽度，请通过将Spacer添加到包含两个文本视图的水平堆栈来分隔驻留和状态。

A spacer expands to make its containing view use all of the space of its parent view, instead of having its size defined only by its contents.

• spacer展开以使其包含视图使用其父视图的所有空间，而不是仅通过其内容定义其大小。

Step 9

Finally, use the padding() modifier method to give the landmark’s name and details a little breathing room.

• 最后，使用padding（）修饰符方法为地标的名称和细节提供一点呼吸空间。

Section 4

Create a Custom Image View

• 创建自定义图像视图

With the name and location views all set, the next thing to do is to add an image for the landmark.

• 通过设置名称和位置视图，接下来要做的是为地标添加图像。

Instead of adding more code in this file, you’ll create a custom view that applies a mask, border, and drop shadow to the image.

• 您将创建一个自定义视图，将遮罩，边框和阴影应用于图像，而不是在此文件中添加更多代码。

Start by adding an image to the project’s asset catalog.

• 首先将图像添加到项目的资产目录中。

Step 1

Find turtlerock.png in the project files’ Resources folder; drag it into the asset catalog’s editor. Xcode creates a new image set for the image.

• 在项目文件的Resources文件夹中找到turtle rock.png; 将其拖到资产目录编辑器中。 Xcode为图像创建新的图像集。

Next, you’ll create a new SwiftUI view for your custom image view.

• 接下来，您将为自定义图像视图创建一个新的Swift UI视图。

Step 2

Choose File > New > File to open the template selector again. In the User Interface section, click to select SwiftUI View and click Next. Name the file CircleImage.swift and click Create.

• 选择“文件”>“新建”>“文件”以再次打开模板选择器 在“用户界面”部分中，单击以选中“SwiftUI视图”，然后单击“下一步”。 将文件命名为CircleImage.swift，然后单击“创建”。

You’re ready to insert the image and modify its display to match the desired design.

• 您已准备好插入图像并修改其显示以匹配所需的设计。

Step 3

Replace the text view with the image of Turtle Rock by using the Image(_:) initializer.

• 使用Image（_ :)初始值设定项将文本视图替换为Turtle Rock的图像。

Step 4

Add a call to .clipShape(Circle()) to apply the circular clipping shape to the image.

• 添加对.clipShape（Circle（））的调用以将圆形剪裁形状应用于图像。

The Circle type is a shape that you can use as a mask, or as a view by giving the circle a stroke or fill.

• 圆形类型是一种可用作蒙版的形状，或通过为圆形提供笔触或填充的视图。

Step 5

Create another circle with a gray stroke, and then add it as an overlay to give the image a border.

• 创建另一个带有灰色笔触的圆，然后将其添加为叠加层以为图像添加边框。

Step 6

• Next, add a shadow with a 10 point radius.
  接下来，添加半径为10点的阴影。

Step 7

Switch the border color to white.

• 将边框颜色切换为白色。

This completes the image view.

• 这样就完成了图像视图。

Section 5

Use UIKit and SwiftUI Views Together

• 一起使用UIKit和SwiftUI视图

Now you’re ready to create a map view. You can use the MKMapView class from MapKit to render the map.

• 现在您已准备好创建地图视图。 您可以使用MapKit中的MKMapView类来渲染地图。

To use UIView subclasses from within SwiftUI, you wrap the other view in a SwiftUI view that conforms to the UIViewRepresentable protocol. SwiftUI includes similar protocols for WatchKit and AppKit views.

• 要在SwiftUI中使用UIView子类，可以将其他视图包装在符合UIViewRepresentable协议的SwiftUI视图中。 SwiftUI包含WatchKit和AppKit视图的类似协议。

To get started, you’ll create a new custom view that can present an MKMapView.

• 首先，您将创建一个可以呈现MKMapView的新自定义视图。

Step 1

Choose File > New > File, select iOS as the platform, select the SwiftUI View template, and click Next. Name the new file MapView.swift and click Create.

• 选择File> New> File，选择iOS作为平台，选择SwiftUI View模板，然后单击Next。 将新文件命名为MapView.swift，然后单击“创建”。

Step 2

Add an import statement for MapKit, and declare UIViewRepresentable conformance for the MapView type.

• 为MapKit添加import语句，并为MapView类型声明UIViewRepresentable一致性。

Don’t worry about the error that Xcode displays; you’ll fix that in the next few steps.

• 不要担心Xcode显示的错误; 你将在接下来的几个步骤中解决这个问题。

The UIViewRepresentable protocol has two requirements you need to add: a makeUIView(context:) method that creates an MKMapView, and an updateUIView(_:context:) method that configures the view and responds to any changes.

• UIViewRepresentable协议有两个需要添加的要求：创建MKMapView的makeUIView（context :)方法和配置视图并响应任何更改的updateUIView（_：context :)方法。

Step 3
Replace the body property with a makeUIView(context:) method that creates and returns an empty MKMapView.

• 用makeUIView（context :)方法替换body属性，该方法创建并返回一个空的MKMapView。