SwiftUI 元件入門教學｜文字、圖片、按鈕這樣用

💬 這篇文章是我參加 2024 iThome 鐵人賽 時寫的，現在整理過後，重新放上部落格啦！

今天終於不是只看架構或設定，而是要真的動手、實作啦！
我們平常在 App 裡看到的畫面，像是文字、按鈕、圖片，其實都是由一些基本的 UI 元件組成的。
我會用最簡單的方式，一個一個實驗、拆解這些元件是怎麼用的，順便把我目前的理解記錄起來～
那就開始吧！GO GO！

Text

從顯示「Hello, world!」開始

我們從最基本的元件說起：Text。
它是 SwiftUI 裡顯示文字最直接的工具，就像 UIKit 裡的 UILabel。來試試看這段程式碼：

Text("Hello, world!")
    .font(.largeTitle)
    .foregroundColor(.blue)
    .padding()

Text("Hello, world!")
    .font(.largeTitle)
    .foregroundColor(.blue)
    .padding()

這裡可以看到 Text 後面的每一行都是在「修飾」這段文字的外觀：

• .font：改變字體大小
• .foregroundColor：設定字的顏色
• .padding：設定文字的內距，讓文字四周留點空間，看起來比較不擠

執行後，畫面上會看到一段藍色的大字「Hello, world!」，這是我成功產生畫面的第一步 🎉

參考資料：Text | Apple Developer Documentation

Image

圖示的加入比想像中簡單

再來是圖片 Image，我這邊先從內建的 SF Symbols 圖示下手。

Image(systemName: "star.fill")
    .foregroundColor(.yellow)
    .imageScale(.large)

Image(systemName: "star.fill")
    .foregroundColor(.yellow)
    .imageScale(.large)

這邊幾個小點：

• 使用 systemName 可以直接呼叫 SF Symbols（這樣就不用準備圖片～）
• .foregroundColor(.yellow) 把圖案塗上黃色
• .imageScale(.large) 控制圖案的大小

執行結果是一顆黃色的星星圖案！只要一行程式，就能讓畫面多點視覺感～

參考資料：Image | Apple Developer Documentation

Button

實作一顆可互動的按鈕

按鈕 Button 是我們實際和畫面互動的開端。

Button(action: {
    print("Button was tapped!")
}) {
    Text("Tap me!")
        .padding()
        .background(Color.green)
        .foregroundColor(.white)
        .cornerRadius(10)
}

Button(action: {
    print("Button was tapped!")
}) {
    Text("Tap me!")
        .padding()
        .background(Color.green)
        .foregroundColor(.white)
        .cornerRadius(10)
}

這裡的關鍵是：

• action 裡可以寫任何你想執行的動作
• 樣式可以自由搭配，像是用 Text + .padding() + .background() 做出按鈕外觀

按下這顆按鈕後，控制台會印出「Button was tapped!」，確認互動沒問題！

參考資料：Button | Apple Developer Documentation

VStack 和 HStack

垂直與水平的排版利器

版面配置少不了排版元件，在 SwiftUI 裡我們可以用 VStack 和 HStack 來決定元件的排列方向。

VStack

垂直排列

VStack 是用來垂直排列元件的容器，讓我們來看看它的用法。

VStack(alignment: .leading) {
    Text("Welcome")
        .font(.title)
    Text("to SwiftUI")
        .font(.subheadline)
}

VStack(alignment: .leading) {
    Text("Welcome")
        .font(.title)
    Text("to SwiftUI")
        .font(.subheadline)
}

這裡的 .alignment: .leading 可以讓內容左對齊。

可以看到我們將「Welcome」和「to SwiftUI」這兩段文字進行垂直排列，且文字靠左對齊。

參考資料：VStack | Apple Developer Documentation

HStack

水平排列

HStack 則是用來將元件進行水平排列，把剛剛的 VStack 改成 HStack，元件就會橫向並排了。

HStack {
    Text("Welcome")
        .font(.title)
    Text("to SwiftUI")
        .font(.subheadline)
}

HStack {
    Text("Welcome")
        .font(.title)
    Text("to SwiftUI")
        .font(.subheadline)
}

可以看到剛剛原本垂直排列的「Welcome」和「to SwiftUI」變成水平排列了～
HStack 可以幫助我們將兩段文字現在會在同一行顯示，從左到右排列。蠻適合做標題＋副標題的排列方式。

參考資料：HStack | Apple Developer Documentation

Spacer

自動填補空間的小幫手

有時候想要讓畫面不要那麼擁擠，想要左右分散對齊。
Spacer() 是最簡單的做法～
我們直接用剛剛的程式繼續改寫：

HStack {
  Text("Welcome")
    .font(.title)
  Spacer()
  Text("to SwiftUI")
      .font(.subheadline)
}

HStack {
  Text("Welcome")
    .font(.title)
  Spacer()
  Text("to SwiftUI")
      .font(.subheadline)
}

這段會讓兩段文字各佔左右，中間由 Spacer 撐開。你不用自己算寬度，SwiftUI 幫你搞定👍

參考資料：利用 SwiftUI 的 Spacer & padding 調整元件位置

ZStack

讓畫面「有層次」

最後來看看 ZStack，這個容器可以把元件重疊起來。就像圖層一樣，下面是圖片，上面可以疊文字：

ZStack {
    Image(systemName: "star.fill")
        .resizable()
        .scaledToFit()
        .foregroundColor(.yellow)
    Text("Star")
        .font(.caption)
        .foregroundColor(.black)
}

ZStack {
    Image(systemName: "star.fill")
        .resizable()
        .scaledToFit()
        .foregroundColor(.yellow)
    Text("Star")
        .font(.caption)
        .foregroundColor(.black)
}

圖片會當作背景，文字會顯示在正中央。這個方式可以用來製作 badge、標籤、帶底圖的標題等等。

執行後，我們會得到一個黃色的星形圖示和一段「Star」文字重疊顯示，文字位於圖示的中央。

參考資料：利用 ZStack，overlay & background 堆疊 SwiftUI 畫面

UI 終於開始動起來了！

今天小試身手，摸了一輪 SwiftUI 裡最基本的 UI 元件，像是 Text、Image、Button，還有排版用的 VStack、HStack、ZStack 等等。
用這些元件組出畫面比我想像中直覺許多，真的有一點在用積木拼 UI 的感覺。

雖然今天還沒正式進入畫面設計，但這些基礎元件就是搭建畫面的第一塊磚。
明天，我打算來玩玩 SwiftUI 的另一個關鍵特色：View Modifiers，看看到底能怎麼用這些修飾語讓畫面更靈活！

參考資料：Day 4: 初探 SwiftUI 基本 UI 元件的使用
繼續看第五天 👉 SwiftUI Modifier 怎麼用？實作範例一次看