概覽

如果您選擇使用 SwiftUI 框架開(kāi)發(fā) app，則可以在布置用戶界面時(shí)看到一個(gè)交互式預(yù)覽。Xcode 會(huì)使您對(duì)源代碼、用戶界面布局和檢查器所做的更改保持同步。例如，您在檢查器中編輯屬性時(shí)，Xcode 會(huì)將對(duì)應(yīng)的代碼添加到源文件中。

顯示 SwiftUI 預(yù)覽

要顯示預(yù)覽，請(qǐng)?jiān)陧?xiàng)目導(dǎo)航器中選擇一個(gè)使用 SwiftUI 的文件，再選取“Editor”(編輯器) >“Canvas”(畫(huà)布)。然后，點(diǎn)按畫(huà)布右上角的“Resume”(恢復(fù)) 按鈕以啟動(dòng)預(yù)覽。Xcode 會(huì)構(gòu)建和運(yùn)行代碼，并直接在畫(huà)布中顯示結(jié)果。

使用預(yù)覽底部的控件可以在畫(huà)布中的模擬設(shè)備上運(yùn)行 app (可帶有或不帶調(diào)試會(huì)話) 或在連接的設(shè)備上運(yùn)行 app。

添加視圖和修飾符

要為您的 app 添加視圖和修飾符，請(qǐng)點(diǎn)按工具欄中的“Library”(資源庫(kù)) 按鈕 (+) 以打開(kāi)資源庫(kù)，然后將資源庫(kù)中的用戶界面元素拖入畫(huà)布或源代碼中。不論您將元素拖到哪里，Xcode 都會(huì)使源代碼和布局保持同步。

編輯用戶界面元素

使用“Action”(操作) 菜單或檢查器來(lái)編輯界面元素，或者通過(guò)在源代碼編輯器中輸入代碼來(lái)編輯。按住 Command 鍵點(diǎn)按畫(huà)布中的元素或代碼中的結(jié)構(gòu)，從“Action”(操作) 菜單中選取“Show SwiftUI Inspector”(顯示 SwiftUI 檢查器)，然后在下一個(gè)面板中更改屬性。另外，也可以選取“View”(顯示) >“Inspectors”(檢查器) >“Show Attributes Inspector”(顯示屬性檢查器)，并在右側(cè)出現(xiàn)的屬性檢查器中更改屬性。

嵌入用戶界面元素

此外，您可以通過(guò)在其他結(jié)構(gòu)中嵌入元素來(lái)修改用戶界面。按住 Command 鍵點(diǎn)按源代碼或畫(huà)布中的某個(gè)元素，然后從彈出式菜單中選取“Embed in [Generic Structure]”(嵌入 [通用結(jié)構(gòu)]) 操作。例如，選取“Embed in HStack”(嵌入 HStack) 可以嵌入一個(gè)在水平直線上排列視圖子項(xiàng)的元素。