Section 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.
To preview and interact with views from the canvas in Xcode, ensure your Mac is running macOS Catalina 10.15
創建一個使用SwiftUI的新Xcode項目。瀏覽畫布、預覽和SwiftUI模板代碼。
要在Xcode中預覽和與來自畫布的視圖交互，請確保您的Mac運行macOS Catalina 10.15
Step 1
Open Xcode and either click Create a new Xcode project in Xcode’s startup window, or choose File > New > Project.
打開Xcode，在Xcode的啓動窗口中單擊Create a new Xcode project，或者選 File > New > Project.
Step 2
In the template selector, select iOS as the platform, select the Single View App template, and then click Next.
在模板選擇器中，選擇iOS作爲平臺，選擇單視圖App模板，然後點擊Next。
Step 3
Enter “Landmarks” as the Product Name, select the Use SwiftUI checkbox, and click Next. Choose a location to save the Landmarks project on your Mac.
輸入“Landmarks”作爲產品名稱，選擇Use SwiftUI複選框，然後點擊Next。選擇一個地點來保存項目在您的Mac。
Step 4
In the Project navigator, click to select 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.
在項目導航器中，單擊以選擇ContentView.swift。
默認情況下，SwiftUI視圖文件聲明兩個結構。第一個結構符合視圖協議，描述了視圖的內容和佈局。第二個結構聲明瞭該視圖的預覽。
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.
在畫布中，單擊Resume以顯示預覽。
提示
如果畫布不可見，選擇 Editor > Editor and Canvas來顯示它。
Step 6
Inside the body property, change “Hello World” to a greeting for yourself.
As you change the code in a view’s body property, the preview updates to reflect your changes.
在body屬性中，將“Hello World”更改爲自定義。
當您更改視圖主體屬性中的代碼時，預覽會更新以反映您的更改。
Section 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應用程序時，您可以使用任何編輯器的組合:源編輯器、畫布或檢查器。無論使用哪種工具，您的代碼都會保持更新。
Step 1
In the preview, Command-click the greeting to bring up the structured editing popover, and choose Inspect.
The popover shows different attributes that you can customize, depending on the type of view you inspect.
在預覽中，命令-單擊問候語，打開結構化編輯彈出窗口，並選擇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.
將字體修飾符更改爲標題。
這將系統字體應用於文本，以便它正確響應用戶的首選字體大小和設置。
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視圖，需要調用稱爲修飾符的方法。修飾符包裝視圖以更改其顯示或其他屬性。每個修飾符都返回一個新視圖，所以通常會將多個修飾符垂直堆疊起來。
Step 4
Edit the code by hand to add the foregroundColor(.green) modifier; this changes the text’s color to green.
手工編輯代碼，添加foregroundColor(.green)修飾符;這將文本的顏色更改爲綠色。
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. Click the Color pop-up menu and choose Inherited to change the text color to black again.
這一次，通過命令-單擊代碼編輯器中的文本聲明打開檢查器，然後從彈出窗口中選擇Inspect。單擊“顏色”彈出菜單並選擇“繼承”將文本顏色再次更改爲黑色。
Step 6
Notice that Xcode updates your code automatically to reflect the change, removing the foregroundColor(.green) modifier.
注意，Xcode會自動更新代碼以反映更改，刪除foregroundColor(.green)修飾符。
Section 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.
In this section, you’ll use a vertical stack to place the title above a horizontal stack that contains details about the park.
使用堆棧組合視圖
除了在前一節中創建的標題視圖之外，您還將添加文本視圖來包含關於地標的詳細信息，比如公園的名稱和所在的州。
創建SwiftUI視圖時，要在視圖的主體屬性中描述它的內容、佈局和行爲;但是，body屬性只返回一個視圖。您可以將多個視圖組合並嵌入到堆棧中，這些堆棧將視圖水平、垂直或前後分組在一起。
在本節中，您將使用垂直堆棧將標題置於包含公園詳細信息的水平堆棧之上。
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.
命令-單擊文本視圖的初始化器以顯示結構化編輯彈出窗口，然後選擇嵌入到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”文本視圖之後立即將文本視圖拖到代碼中的位置。
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.
將位置的字體設置爲副標題。
Step 5
Edit the VStack initializer to align the views by their leading edges.
By default, stacks center their contents along their axis and provide context-appropriate spacing.
編輯VStack初始化器，使視圖的前導邊緣對齊。
默認情況下，堆棧將其內容沿軸居中，並提供與上下文相關的間距。
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-click on Joshua Tree National Park，然後選擇Embed In 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.
在位置之後添加一個新的文本視圖，將佔位符文本更改爲公園的狀態，然後將其字體設置爲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.
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.
首先將一個圖片添加到項目的asset目錄中。
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.
在項目文件的資源文件夾中查找turtlerock.png;將其拖到asset目錄的編輯器中。Xcode爲映像創建一個新的映像集。
Next, you’ll create a new SwiftUI view for your custom image view.
接下來，您將爲您的自定義圖像視圖創建一個新的SwiftUI視圖。
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.
選擇File > New > File，再次打開模板選擇器。在用戶界面部分，單擊以選擇SwiftUI視圖並單擊Next。將文件命名爲CircleImage.swift並單擊Create。
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.
步驟3
使用image(:)初始化器將文本視圖替換爲Turtle Rock的圖像。
Step 4
Add a call to clipShape(Circle()) to apply the circular clipping shape to the image.
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.
添加對clipShape(Circle())的調用，將圓形裁剪形狀應用於圖像。
圓形類型是一種形狀，您可以將其用作蒙版，或者通過給圓形添加邊框或填充來作爲視圖。
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
Now you’re ready to create a map view. You can use the MKMapView class from MapKit to render the map.
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.
同時使用UIKit和SwiftUI視圖
現在您可以創建一個地圖視圖了。您可以使用MapKit中的MKMapView類來呈現地圖。
要使用來自SwiftUI中的UIView子類，你需要將另一個視圖封裝在一個符合uiview具象協議的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視圖模板，點擊Next。將新文件命名爲MapView.swift並單擊Create。
Step 2
Add an import statement for MapKit, and declare UIViewRepresentable conformance for the MapView type.
Don’t worry about the error that Xcode displays; you’ll fix that in the next few steps.
添加MapKit的import語句，並聲明MapView類型的UIViewRepresentable 。
不要擔心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.
用創建並返回空MKMapView的makeUIView(context:)方法替換body屬性。
Step 4
Create an updateUIView(:context:) method that sets the map view’s region to the correct coordinates to center the map on Turtle Rock.
創建一個updateUIView(:context:)方法，該方法將地圖視圖的區域設置爲正確的座標，以將地圖置於Turtle Rock的中心。
When previews are in static mode, they only fully render SwiftUI views. Because MKMapView is a UIView subclass, you’ll need to switch to a live preview to see the map.
當預覽處於靜態模式時，它們只完全呈現SwiftUI視圖。因爲MKMapView是一個UIView子類，你需要切換到實時預覽來查看地圖。
Step 5
Click the Live Preview button to switch the preview to live mode. You might need to click the Try Again or Resume button above your preview.
In a moment, you’ll see a map of Joshua Tree National Park, home of Turtle Rock.
點擊實時預覽按鈕，將預覽切換到實時模式。您可能需要單擊預覽上方的重試或恢復按鈕。
過一會兒，你會看到約書亞樹國家公園的地圖，那是龜巖的故鄉。
Section 6
Compose the Detail View
You now have all of the components you need — the name and place, a circular image, and a map for the location.
With the tools you’ve used so far, combine your custom views to create the final design for the landmark detail view.
組合細節視圖
現在您已經擁有了所需的所有組件—名稱和位置、圓形圖像和位置地圖。
使用到目前爲止使用的工具，結合您的自定義視圖來創建地標詳細視圖的最終設計。
Step 1
In the Project navigator, select the ContentView.swift file.
在項目導航器中，選擇ContentView.swift文件。
Step 2
Embed a VStack that holds the three text views in another VStack.
將包含三個文本視圖的VStack嵌入到另一個VStack中。
Step 3
Add your custom MapView to the top of the stack. Set the size of the MapView with frame(width:height:).
將您的自定義MapView添加到堆棧的頂部。使用框架設置MapView的大小(寬度:高度:)。
When you specify only the height parameter, the view automatically sizes to the width of its content. In this case, MapView expands to fill the available space.
當只指定height參數時，視圖將自動調整爲其內容的寬度。在本例中，MapView展開以填充可用空間。
Step 4
Click the Live Preview button to see the rendered map in the composed view.
You can continue editing the view while showing a Live Preview.
單擊Live Preview按鈕可以在組合視圖中看到呈現的地圖。
您可以在顯示實時預覽的同時繼續編輯視圖。
Step 5
Add the CircleImage view to the stack.
將CircleImage視圖添加到堆棧中。
Step 6
To layer the image view on top of the map view, give the image an offset of -130 points vertically, and padding of -130 points from the bottom of the view.
These adjustments make room for the text by moving the image upwards.
要將圖像視圖層置於地圖視圖的頂部，請將圖像的垂直偏移距設置爲-130點，並將視圖底部的填充距設置爲-130點。
這些調整通過向上移動圖像爲文本騰出空間。
Step 7
Add a spacer at the bottom of the outer VStack to push the content to the top of the screen.
在外部VStack的底部添加一個間隔，將內容推送到屏幕的頂部。
Step 8
Finally, to allow the map content to extend to the top edge of the screen, add the edgesIgnoringSafeArea(.top) modifier to the map view.
最後，爲了允許地圖內容擴展到屏幕的頂部邊緣，添加edgesIgnoringSafeArea(.top)修改器到地圖視圖。
