上一篇我們了解 View 跟 Modifier 的關係後，接下來就是要學習 SwiftUI 的 State 和 Binding 到底是什麼，其實在上一篇客製化 Text 的環節裡有寫到 State ，只是沒有介紹的非常詳細，這個觀念對於 SwiftUI 來說也是至關重要，就讓我們一覽它神奇的地方吧！

State 是什麼

SwiftUI 裡面的變數前面會多了一個 State 宣告，它代表的意思是允許我們去改變這個變數，可以看一下如下程式碼的展現

struct CounterView: View {
    @State private var count = 0
    
    var body: some View {
        VStack {
            Text("Count: \(count)")
            Button("增加") {
                count += 1
            }
        }
    }
}

在這個案例中，可以很清楚的了解到，當按鈕點擊後 count 就會加一，那麼對應的 Text 文字上顯示的 count 也會因為這樣原本是 0，加一後顯示 Count: 1，也就是說 State 可以更新資料讓我們更新對應有用到它的畫面

Binding 又是什麼

至於 Binding 這個概念，我覺得在 SwiftUI 呈現上又更特別了，其他宣告式 UI 框架中沒有看到這樣的做法，它所代表的意思是，變數同時有讀取以及寫入的操作，看起來很抽象，我們可以看一下程式碼

struct ContentView: View {
    @State private var isOn = false
    
    var body: some View {
        Toggle(isOn: $isOn) {
            Text("開關")
        }
        .padding()
    }
}

Toggle 就是在 App 上設定特定開關使用的 UI，而在這裡的案例是利用 isOn 這個變數，去讀取 Toggle 目前狀態是開還是關，而當使用者在手機畫面操作這個開關，而改變了它的狀態，則會去更新，也就是寫入 isOn ，原本 false 關閉狀態，操作後變成打開 true 的狀態，這就是 Binding，它會在變數前面多加一個 $ 的符號，讓我們知道它同時擁有讀取跟寫入的狀態

但是如果我們改寫 isOn 前面的 State 變成 Binding

struct ToggleView: View {
    @Binding var isOn: Bool
    
    var body: some View {
        Toggle(isOn: $isOn) {
            Text("開關")
        }
    }
}

它就會變成當我從外面去使用 ToggleView，我可以從外面傳入 isOn 這個參數的狀態，進而改變裡面 isOn 的值且變更 Toggle 的狀態，而 Toggle 本身如果被使用者操作時 isOn 也會連動更新到狀態

更進階的用法

當然只有單一的參數自然是不夠的，我們還有更進階的使用方式，也就是 list 列表，多個資料要顯示要寫入怎麼處理，參照如下程式碼

struct ListView: View {
    @State private var items = ["項目 1", "項目 2", "項目 3"]
    
    var body: some View {
        List {
            ForEach(items.indices, id: \.self) { index in
                TextField("項目", text: $items[index])
            }
        }
    }
}

在列表中，會使用 ForEach 去一個一個走訪每個項目，items 這個列表前面依然是加上 State 定義它是會更新的資料，走訪後裡面的是一個輸入框，它會先顯示每個項目初始設定的值（例如：項目 1），而當使用者利用輸入框去改值，則會寫入該項目，那麼此時的寫法是 $item[index]，也就是說其實我們可以針對列表裡單個項目加上 Binding

總結

本次學習到了非常實用的寫法，這讓我們 SwiftUI 有了更新畫面的功能，讓 App 更加活躍了起來，而以過往的經驗來說，其他框架並無此寫法，所以是比較特別的寫法需要專注的學習這一塊，今天就到這裡，明天繼續開展我們的 SwiftUI App 學習之旅！

• SwiftUI — State vs Binding