The Util Designer
SwiftUI Button元件基本使用
xcode 13.4.1, swift 5.5, iOS 15.4
2022-08-16
Button的元件，應該是所有App最常用的元件之一，這次講講Button元件怎樣使用。
1. 一個完整Button需要兩部分，一是顯示的樣式，二是用戶按下之後要運行程式碼。
import SwiftUI

struct ButtonExample: View {
    var body: some View {
        Button("Tap me") {
            print("You tap me!")
        }
    }
}
以下程式的Button只是顯示Tap me的字符串，按下後只做一件事，就是打印You tap me!的字符串，結果如下：
2. 以下是另一種創建Button的，雖比第一種複雜，但卻給大家更大的自由度去進行客制化，而不是只是簡單文字，實作如下，：
import SwiftUI

struct ButtonExample: View {
    var body: some View {
        Button {
            print("You tap me!")
        } label: {
            Text("Tap me")
        }

    }
}
3. 我們可以先試試改變Text的樣式，比如顏色、字體及其大小等：
import SwiftUI

struct ButtonExample: View {
    var body: some View {
        Button {
            print("You tap me!")
        } label: {
            Text("Tap me")
                .font(.system(size: 20, weight: .heavy, design: .rounded))
                .foregroundColor(.orange)
                .padding()
                .border(.gray)
        }

    }
}
4. 除了Text，現在可以試試Label元件，Label元件除了有文字，還可以顯示SF Symbols，例子如下：
import SwiftUI

struct ButtonExample: View {
    var body: some View {
        Button {
            print("You tap me!")
        } label: {
            Label("Tap me", systemImage: "hand.tap")
        }

    }
}
5. 以下試試使用Image元件來作為Button的顯示樣式：
import SwiftUI

struct ButtonExample: View {
    var body: some View {
        Button {
            print("You tap me!")
        } label: {
            Image(systemName: "hand.tap")
                .font(.system(size: 90, weight: .heavy, design: .rounded))
                .padding(30)
                .background(.blue)
                .foregroundColor(.white)
                .clipShape(Circle())
        }

    }
}