Button
視圖可用於顯示互動式按鈕元素。
我們可以這樣聲明它:
Button("按鈕標籤") {
// 當點擊時執行的操作
}
或者這樣聲明:
Button {
// 當點擊時執行的操作
} label: {
Text("按鈕標籤")
}
第二種方式在按鈕的標籤中有其他內容,而不僅僅是文本時比較常用,例如圖像。
讓我們在一個SwtiUI程序中使用第一種方式:
struct ContentView: View {
var body: some View {
Button("測試") {
}
.font(.title)
}
}
看到了吧?應用程序中有一個藍色文本,你可以點擊它。它是互動式的。
由於我們沒有告訴它在點擊時做什麼,所以它沒有任何操作。
我們可以在調試控制台中打印一些內容:
struct ContentView: View {
var body: some View {
Button("測試") {
print("測試")
}
.font(.title)
}
}
請注意,這僅在運行應用程序時才起作用,Xcode的預覽中不起作用。
現在我們可以為我們的應用程序添加另一個步驟。我們將在按鈕標籤中打印一個屬性值:
struct ContentView: View {
var count = 0
var body: some View {
Button("計數:\(count)") {
}
.font(.title)
}
}
並且當點擊它時,我們將增加計數值:
struct ContentView: View {
var count = 0
var body: some View {
Button("計數:\(count)") {
self.count += 1
}
.font(.title)
}
}
但是應用程序將無法編譯,出現以下錯誤:
物件的可變運算元的左側不可變:‘self’ 是不可變的 ❌
在聲明該屬性之前,我們需要使用@State
屬性包裝器:
struct ContentView: View {
@State var count = 0
var body: some View {
Button("計數:\(count)") {
self.count += 1
}
.font(.title)
}
}
現在應用程序將運行,我們可以點擊標籤來增加count
屬性值:
當然,下次運行時計數器將從0開始,因為我們沒有以任何方式保存狀態。我們將在之後處理這個。