今天我們要進入 SwiftUI 的 UI 元件學習旅程了，UI 全名 User Interface 顧名思義在此篇文章意思就是提供使用者在手機上操作介面，看似簡單但是每個元件的使用都還是需要學習，畢竟跟我們以往建立 UI 元件的邏輯思維仍然不同。我們會先鞏固基礎 UI 知識後，才正式開始打造 App。

本次介紹的 UI 元件預計會有 Button、TextField、Text ，那麼我們就開始吧。

SwiftUI：Button 介紹

Button 就是手機上可以讓使用者進行點擊動作的一個範圍，叫做按鈕，若是要簡單建議按鈕，程式碼如下：

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button("點我") {
            // 在這裡定義按鈕被點擊後的操作
            print("Button 被點擊了！")
        }
    }
}

它的結構非常簡單，Button 中括號顯示按鈕要的文字，大括號則是定義按鈕被點擊後的相應動作，而我們這邊只有簡單加了一個打印訊息可以在 Xcode 的 Console 確認是不是真的是點擊後有所反應。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button("點我") {
            print("Button 被點擊了！")
        }
        .frame(width: 200, height: 100)
        .foregroundColor(.white)
        .background(Color.blue)
        .cornerRadius(10)
        .padding(40)
        
    }
}

而我們不只是建立按鈕而已，還可以替它增加自定義的外觀，讓它變得與眾不同。

• frame(width: 200, height: 100): 設定按鈕的長寬（長 200，寬 100）。
• foregroundColor: 設定按鈕的前景顏色（文字顏色）。
• background: 設定按鈕的背景顏色。
• cornerRadius: 設定這個按鈕圓角值。
• padding: 設定按鈕內容的填充空間。

SwiftUI：TextField 介紹

TextField 這個 UI 元件的用途是為了讓使用者可以輸入自己想要的內容，並且呈現在 App 上面，中文稱輸入框，為了實現這個功能，簡單的程式碼如下：

import SwiftUI

struct ContentView: View {
    @State private var userInput: String = ""

    var body: some View {
        TextField("請輸入文字", text: $userInput)
            .padding()
            .textFieldStyle(RoundedBorderTextFieldStyle())
    }
}

userInput 比較特別，它是監聽輸入框讀取跟寫入，所以變數會多加一個 State，使用者輸入的資訊會存在這個變數上。而它依然跟 Button 一樣可以在下面自定義需要的設定外觀樣式。

TextField("請輸入文字", text: $userInput, onCommit: {
    print("用戶輸入為: \(userInput)")
})

而我們對於輸入後需要監聽輸入回來的事件可以使用 onCommit，這裡就會依據使用者輸入的時候打印出”用戶輸入為: [用戶輸入的字]”。

SwiftUI：Text 介紹

Text 就是最基本 SwiftUI 顯示文字資訊用的 UI 元件，它能夠依據設定顯示標題、內文、資訊等內容，是每個 App 必會使用到的元件，不使用到它我是覺得非常難，除非整個 App 只有影片或是圖像之類的。

Text("歡迎來到 SwiftUI 的世界")
    .font(.title)
    .foregroundColor(.blue)

定義一個標題文字可以參照如上程式碼，文字顏色依據設定會顯示藍色。

Text("這是一個多行文本示例，它可以在設定的行數之內顯示。")
    .multilineTextAlignment(.center)
    .lineLimit(2)

利用了 multilineTextAlignment(.center) 則會讓文字置中顯示，當然也可以定義其他位置，lineLimit(2) 則是定義最多文字就只有兩行。

Text("歡迎來到 SwiftUI 的世界")
    .shadow(color: .gray, radius: 2, x: 0, y: 2)

而我們也可以設定文字的陰影，此程式碼會顯示灰色陰影，y軸值是2，圓角設定也是2，不免說一下這邊設定十分友善，早期開發 App 時陰影效果製作是非常困難，客製化都需要開發者自己在畫布上畫，時代演進，現在只需要一行解決。

總結

我們學會了基本的 UI 元件應用，基本上跟其他宣告式 UI 框架寫法大同小異，所以在這個環節學習起來算是蠻上手的，而且語法應該也是新手友善，所以推薦大家一起來學習。

更多的設定值我們可以參考 Apple 官網的文件獲得。

• Apple Developer SwiftUI Button
• Apple Developer SwiftUI TextField
• Apple Developer SwiftUI Text