SwiftUI Button 按鈕教學

Button 是使用者與 App 互動最核心的元件。在 SwiftUI 中，建立一個按鈕並處理點擊事件是非常直觀的。

基礎語法

建立一個 Button 最基本的兩個部分是：Action (點擊後做什麼) 和 Label (按鈕長什麼樣子)。

Button {
    print("按鈕被點擊了！")
} label: {
    Text("點我")
}

如果按鈕只包含簡單的文字，還有更簡潔的寫法：

Button("點我") {
    print("按鈕被點擊了！")
}

按鈕樣式 (Button Style)

SwiftUI 提供了多種內建的按鈕樣式，讓你快速改變按鈕的外觀。

Button("雖然我是按鈕，但我長得像文字") { }
    .buttonStyle(.automatic) // 預設

Button("我是顯眼的按鈕") { }
    .buttonStyle(.borderedProminent) // 填充顏色的按鈕 (iOS 15+)
    .tint(.green) // 改變填充顏色

Button("我是有邊框的按鈕") { }
    .buttonStyle(.bordered) // 只有灰色背景/邊框 (iOS 15+)
    
Button("我是無邊框按鈕") { }
    .buttonStyle(.borderless)

自定義按鈕外觀

你可以完全控制按鈕的外觀。label 閉包中可以是任何 View，這意味著你可以放入圖片、堆疊或是複雜的佈局。

Button {
    // Action
} label: {
    HStack {
        Image(systemName: "trash")
        Text("刪除")
    }
    .font(.headline)
    .padding()
    .foregroundColor(.white)
    .background(.red)
    .cornerRadius(10)
}

這段程式碼會建立一個紅色背景、圓角、帶有垃圾桶圖示和文字的自定義按鈕。

按鈕的角色 (Button Role)

在 iOS 15 之後，我們可以指定按鈕的角色 (Role)，系統會自動根據角色賦予適當的語意樣式（例如刪除按鈕會自動變紅）。

Button("刪除", role: .destructive) {
    // 執行刪除動作
}
.buttonStyle(.borderedProminent) // 加上這個樣式後，背景會自動變紅

Button("取消", role: .cancel) {
    // 執行取消動作
}

禁用按鈕 (Disabled)

你可以透過 .disabled() 修飾符來控制按鈕是否可以被點擊。

Button("送出") {
    // submit
}
.disabled(true) // 按鈕會變灰且無法點擊

通常我們會配合狀態變數 (State) 來使用：

@State private var isLoading = false

Button("登入") {
    isLoading = true
    // login...
}
.disabled(isLoading) // 載入中時禁用按鈕

學會了 Button，我們就開啟了互動的大門。接下來，我們需要學習如何將這些元件整齊地排列在畫面上，這就是 版面佈局 (Layout) 的學問了。