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開始,因為我們沒有以任何方式保存狀態。我們將在之後處理這個。