SwiftUI 官方教程（一）

完整中文教程及代碼請查看 https://github.com/WillieWangWei/SwiftUI-Tutorials

 

建立和組合 View

此部分將指引你構建一個發現和分享您喜好地方的 iOS app —— Landmarks 。首先咱們來構建顯示地標詳細信息的 view。

Landmarks 使用 stacks 將 image、text 等組件進行組合和分層，以此來給 view 佈局。若是想給視圖添加地圖，咱們須要引入標準 MapKit 組件。在咱們調整設計時，Xcode 能夠做出實時反饋，以便咱們看到這些調整是如何轉換爲代碼的。

下載項目文件並按照如下步驟操做。

• 預計完成時間：40 分鐘
• 初始項目文件：下載

1. 建立一個新項目而且瀏覽 Canvas

用 SwiftUI 的 app 模板來建立一個新的 Xcode 項目，而且瀏覽一下這個 canvas。

 

 

1.1 打開 Xcode ，在 Xcode 的啓動窗口中單擊 Create a new Xcode project ，或選擇 File > New > Project 。

 

 

 

1.2 選擇 iOS 平臺， Single View App 模板，而後單擊 Next 。

 

 

 SwiftUI教程

1.3 輸入 Landmarks 做爲 Product Name ，勾選 Use SwiftUI 複選框，而後單擊 Next 。選擇一個位置保存此項目。

 

 

 

  SwiftUI教程

1.4 在 Project navigator 中，選中 ContentView.swift 。

默認狀況下， SwiftUI view 文件聲明瞭兩個結構體。第一個結構體遵循 View 協議，描述 view 的內容和佈局。第二個結構體聲明該 view 的預覽。

ContentView.swift

import SwiftUI struct ContentView: View { var body: some View { Text("Hello World") } } struct ContentView_Preview: PreviewProvider { static var previews: some View { ContentView() } } 

 

 

 

1.5 在 canvas 中，單擊 Resume 來顯示預覽。

Tip：若是沒有 canvas ，選擇 Editor > Editor and Canvas 來顯示。

 

 

 

1.6 在 body 屬性中，將 Hello World 更改成本身的問候語。更改代碼時，預覽便會實時更新。

ContentView.swift

import SwiftUI struct ContentView: View { var body: some View { Text("Hello SwiftUI!") } } struct ContentView_Preview: PreviewProvider { static var previews: some View { ContentView() } } 

 

 SwiftUI 官方教程 

SwiftUI 官方教程（二）