/

SwiftUI：Button視圖和更新應用程序狀態

SwiftUI：Button視圖和更新應用程序狀態

Button視圖可用於顯示互動式按鈕元素。

我們可以這樣聲明它：

1
2
3
Button("按鈕標籤") {
    // 當點擊時執行的操作
}

或者這樣聲明：

1
2
3
4
5
Button {
    // 當點擊時執行的操作
} label: {
    Text("按鈕標籤")
}

第二種方式在按鈕的標籤中有其他內容，而不僅僅是文本時比較常用，例如圖像。

讓我們在一個SwtiUI程序中使用第一種方式：

1
2
3
4
5
6
7
8
struct ContentView: View {
    var body: some View {
        Button("測試") {
        
        }
        .font(.title)
    }
}

看到了吧？應用程序中有一個藍色文本，你可以點擊它。它是互動式的。

由於我們沒有告訴它在點擊時做什麼，所以它沒有任何操作。

我們可以在調試控制台中打印一些內容：

1
2
3
4
5
6
7
8
struct ContentView: View {
    var body: some View {
        Button("測試") {
            print("測試")
        }
        .font(.title)
    }
}

請注意，這僅在運行應用程序時才起作用，Xcode的預覽中不起作用。

現在我們可以為我們的應用程序添加另一個步驟。我們將在按鈕標籤中打印一個屬性值：

1
2
3
4
5
6
7
8
9
10
struct ContentView: View {
    var count = 0
    
    var body: some View {
        Button("計數：\(count)") {
        
        }
        .font(.title)
    }
}

並且當點擊它時，我們將增加計數值：

1
2
3
4
5
6
7
8
9
10
struct ContentView: View {
    var count = 0
    
    var body: some View {
        Button("計數：\(count)") {
            self.count += 1
        }
        .font(.title)
    }
}

但是應用程序將無法編譯，出現以下錯誤：

物件的可變運算元的左側不可變：’self’ 是不可變的 ❌

在聲明該屬性之前，我們需要使用@State屬性包裝器：

1
2
3
4
5
6
7
8
9
10
struct ContentView: View {
    @State var count = 0
    
    var body: some View {
        Button("計數：\(count)") {
            self.count += 1
        }
        .font(.title)
    }
}

現在應用程序將運行，我們可以點擊標籤來增加count屬性值：

當然，下次運行時計數器將從0開始，因為我們沒有以任何方式保存狀態。我們將在之後處理這個。

tags: [“SwiftUI”, “Button view”, “app state”, “@State”]