SwiftUI 的按鈕 — Button

Button | Apple Developer Documentation

從 Views library 加入 Button

第一個參數是 button 顯示的文字，在框框 Action 輸入點選 button 執行的程式。

Button("Button") {
    print("請不要按得太大力")
}

手動輸入 button

比方選擇 (action:label:)。

在框框按 enter。

第一個 { } 對應參數 action，代表點選 button 執行的程式。第二個 { } 對應參數 label，代表 button 顯示的內容。

Button {
    print("請不要按得太大力")
} label: {
    Text("Button")
}

顯示文字的 button

點選 button 時執行我們傳入的程式(closure)，印出 follow。

• 方法 1。

struct ContentView: View {
    var body: some View {
        Button {
            print("follow")
        } label: {
            Text("follow")
        }
    }
}

• 方法 2。

struct ContentView: View {
   var body: some View {
      Button("follow") {
         print("follow")
      }     
   }
}

button 搭配 markdown

struct ContentView: View {
    var body: some View {
        Button("Hello, ***Peter***") {

        }
    }
}

struct ContentView: View {
    var body: some View {
        Button {
            
        } label: {
            Text("Hello, ***Peter***")
        }

    }
}

button 的背景顏色和文字樣式

• 方法1: 設定 background 和 foregroundStyle (或 tint)。

struct ContentView: View {
    var body: some View {
        Button {
            print("follow")
        } label: {
            Text("follow")
                .font(.system(size: 30))
                .padding()
                .background(.yellow)
                .foregroundStyle(.red)
        }
    }
}

struct ContentView: View {
    var body: some View {
        Button("follow") {
            print("follow")
        }
        .font(.system(size: 30))
        .padding()
        .background(.yellow)
        .foregroundStyle(.red)
    }
}

文字的顏色可用 foregroundStyle 或 tint 設定。

• 方法2: buttonStyle borderedProminent 搭配 tint 設定。(iOS 15 以上)

struct ContentView: View {
    var body: some View {
        Button {
            print("follow")
        } label: {
            Text("follow")
                .font(.system(size: 30))
                .padding()
                .foregroundStyle(.red)
        }
        .buttonStyle(.borderedProminent)
        .tint(.yellow)
    }
}

struct ContentView: View {
    var body: some View {
        Button("follow") {
            print("follow")
        }
        .font(.system(size: 30))
        .padding()
        .buttonStyle(.borderedProminent)
        .tint(.yellow)
        .foregroundStyle(.red)

    }
}

iOS 17 更方便顯示圖片的 Button

iOS 17 更方便顯示圖片的 SwiftUI Button

顯示客製內容的 button

我們可以自由客製 button 的內容，不只顯示文字。以下例子顯示包含圖片和文字的 HStack。

struct ContentView: View {
    
    var body: some View {
        Button {
            print("search")
        } label: {
            HStack {
                Image(systemName: "magnifyingglass")
                Text("search")
                Image(systemName: "magnifyingglass")
            }
            .foregroundStyle(.red)
            .background(.yellow)
        }
        
    }
}

圓角 button

• 呼叫 buttonStyle & buttonBorderShape(iOS 15 以上)。

struct ContentView: View {
    
    var body: some View {
        VStack {
            Button {
                
            } label: {
                Text("Login")
                    .font(.largeTitle)
            }
            .buttonStyle(.borderedProminent)
            
            Button {
                
            } label: {
                Text("Register")
                    .font(.largeTitle)
            }
            .buttonStyle(.bordered)
            .buttonBorderShape(.capsule)
        }
    }
}

• clipShape & background(_:in:fillStyle:)。

SwiftUI 讓 view 變圓角的 clipShape & background(_:in:fillStyle:)

讓 Button & NavigationLink 的圖片變色的 renderingMode

讓 Button & NavigationLink 的內容維持原來顏色的 PlainButtonStyle & renderingMode

action 參數傳入 function 名字

Button 的參數 action 是 function 型別，代表我們要傳入一段執行的程式。因此我們可以傳入 { } 表示的 closure，也可以傳入 function 名字。

init(action: @escaping () -> Void, @ViewBuilder label: () -> Label)

比方以下例子傳入 printHello，因此按鈕點選時將執行 function printFollow，列印訊息 follow。

struct ContentView: View {
    
    func printFollow() {
        print("follow")
    }
    
    var body: some View {
        
        Button(action: printFollow) {
            Text("follow")
                .font(.system(size: 30))
                .background(.yellow)
                .foregroundStyle(.red)
        }
    }
}