SwiftUI - 構建第一個應用程式

---

---

SwiftUI 是 Apple 開發的一個框架，用於為其所有平臺（包括 iOS、macOS、watchOS、tvOS、visionOS 等）建立應用程式。它使用宣告式語法來建立應用程式，這意味著開發人員只需要描述使用者介面應該是什麼樣子以及它的行為方式。

例如，我們宣告列表應該做什麼，而不是逐步說明如何實現列表的操作步驟。它還統一了程式碼庫，這意味著單個程式碼庫可以在所有 Apple 平臺上執行。

SwiftUI 與 Xcode 無縫協作。Xcode 是 Apple 的整合開發環境。它為開發 UI 提供了一個強大的平臺。SwiftUI 集成了 Xcode 以提供 UI 程式碼的即時預覽、拖放設計工具以及除錯和測試工具。因此，在構建新應用程式之前，首先要了解專案結構的基礎知識：

• ProjectFile.swift：在專案導航器中，選擇“ProjectName”。它是一個使用 SwiftUI 應用程式生命週期的應用程式，其結構符合 App 協議。此結構返回一個或多個場景，這些場景提供要顯示的內容。此處，@main 屬性表示應用程式的入口點。
• ContentView.swift：在專案導航器中，選擇 ContentView。它包含一個檢視檔案和預覽。此處，檢視檔案被宣告為符合 View 協議的結構。它還包含檢視內容和佈局。此處，預覽宣告用於建立該檢視的預覽。
• 畫布：它用於自動顯示程式碼的預覽。如果畫布不可見，請轉到編輯器，然後轉到畫布以顯示它。
• 模擬器：它是一個工具，模擬真實裝置的硬體和軟體環境以執行應用程式並檢視它們在沒有物理裝置的情況下將如何執行。它幫助開發人員測試和除錯他們新建立的應用程式。

使用 SwiftUI 建立第一個應用程式

要在 Xcode 中建立應用程式，請按照以下步驟操作：

步驟 1 - 開啟 Xcode。

步驟 2 - 點選“建立新專案”。

步驟 3 - 現在選擇 iOS 作為平臺，然後選擇 App 模板，然後點選“下一步”按鈕。

步驟 4 - 輸入產品的名稱，選擇“SwiftUI”作為介面，選擇“Swift”作為語言。現在點選“下一步”按鈕。

步驟 5 - 現在選擇要儲存專案的儲存位置，然後點選“建立”按鈕。

步驟 6 - 現在我們準備建立我們的應用程式了。

步驟 7 - 將預設內容替換為以下內容。

import SwiftUI
struct ContentView: View {
   @State private var mtext = "Hello, Tutorialspoint"
   var body: some View {
      VStack {
         ZStack{
            Rectangle().fill(Color.green).frame(height:100)
            Text(mtext).font(.largeTitle).padding()
         }
         Button(action: {
            mtext = "Hello, SwiftUI!"
         }) {
         Text("Tap Me")
		    .font(.title).padding()
            .background(Color.red)
            .foregroundColor(.white)
            .cornerRadius(15)
         }
                    
      }
   }
}
#Preview {
   ContentView()
}

步驟 8 - 預覽將自動顯示在畫布上。

使用 SwiftUI 構建第一個應用程式

當 UI 程式碼完成後，我們可以在模擬器上執行我們的應用程式以檢查它在真實裝置上的執行情況，為此，請按照以下步驟操作：

步驟 1 - 開啟 Xcode 並開啟已完成的專案。

步驟 2 - 選擇要使用的模擬裝置，例如 iPhone 12、13、14、15 等。

步驟 3 - 現在點選播放按鈕或按“cmd + R”或播放按鈕在選定的模擬器中執行我們的應用程式。

步驟 4 - 將開啟選定的模擬器。現在開啟建立的應用程式。