iOS Hello World

紙上談兵不如親手實作。現在，讓我們從頭開始，一步步在 Xcode 中建立你的第一個 iOS App，並在畫面上顯示經典的 "Hello, World!"。

建立新專案

  1. 打開 Xcode。
  2. 在歡迎視窗中點擊 "Create New Project..." (或從選單列選擇 File > New > Project)。
  3. 在上方分頁選擇 iOS，然後在 Application 區塊選擇 App，點擊 Next。
  4. 填寫專案資訊：
    • Product Name: 輸入 HelloWorld。
    • Team: 如果你有登入 Apple ID，可以選擇你的個人 Team；如果只是模擬器測試，選擇 None 也可以 (但在真機測試時需要)。
    • Organization Identifier: 輸入反向網域名稱風格的 ID，例如 com.yourname。
    • Interface: 務必選擇 SwiftUI。
    • Language: 務必選擇 Swift。
    • Storage: 選擇 None (我們暫時不需要資料庫)。
  5. 點擊 Next，選擇一個儲存位置 (例如 Desktop)，然後點擊 Create。

恭喜！你已經建立好一個新的 SwiftUI 專案了。

認識程式碼

Xcode 會自動打開 ContentView.swift。讓我們看看目前的程式碼：

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

這段程式碼做了什麼？

  1. struct ContentView: View: 定義了一個名為 ContentView 的結構，它遵循 View 協議。在 SwiftUI 中，所有的 UI 都是 View。
  2. var body: some View: 這是 View 協議必須實作的屬性。你在這裡描述這個視圖的內容。
  3. VStack: 這是一個垂直堆疊佈局 (Vertical Stack)，它將裡面的元件由上往下排列。
  4. Image(...): 顯示一個系統內建的地球圖示。
  5. Text("Hello, world!"): 顯示文字 "Hello, world!"。
  6. .padding(): 在整個 VStack 周圍增加一些留白空間，讓畫面不要貼著邊緣。

修改你的 App

試著修改一下程式碼，讓它變成你想要的樣子。例如，將 "Hello, world!" 改成 "Hello, iOS!"，並改變文字顏色：

Text("Hello, iOS!")
    .font(.largeTitle) // 設定字體大小
    .foregroundColor(.blue) // 設定文字顏色

你會發現，當你在編輯程式碼時，右側的 Preview Canvas (預覽畫布) 會幾乎即時地更新顯示結果。這就是 SwiftUI 強大的 Preview 功能！

如果右側沒有看到預覽畫面，請確認 Canvas 已經開啟 (快速鍵 Option + Command + Enter)，或者點擊 Canvas 上方的 "Refresh" 按鈕。

運行 App (模擬器)

雖然 Preview 很方便，但有時候我們需要在完整的模擬器環境中運行。

  1. 在 Xcode 視窗左上角，選擇你想要模擬的裝置 (例如 iPhone 15 Pro)。
  2. 點擊左上角的 Play 按鈕 (三角形圖示)，或是按下快速鍵 Command + R。
  3. 等待編譯完成，模擬器就會自動啟動並打開你的 App。

你成功運行了你的第一個 iOS App！

下一步

現在你已經學會如何建立專案並修改簡單的文字。接下來，我們將深入了解 SwiftUI 的基礎元件，學習如何使用更多的 UI 控制項來豐富你的 App。