Day11 Binding

如果在變數前面加上@State修飾詞，就表示該變數可以根據已更新的內容即時顯示到UI元件上，但是@State只限定於單一頁面。如果要在多個頁面同步同一個變數的內容時，就無法使用@State。

而@Binding可以解決這個問題。

先使用NavigationSplitView製作可以跳轉到第二頁的功能，例如：

var body: some View {
    NavigationSplitView {
        NavigationLink {
                
        } label: {
            VStack {
                Text("Go To Page2")
            }
        }
    } detail: {
        Text("NavigationSplitView detail")
    }
}

加入一個@State的變數，初始值為false，然後將目前的狀態值顯示出來：

var body: some View {
    
    @State var isOn: Bool = false
    
    NavigationSplitView {
        NavigationLink {
                
        } label: {
            VStack {
                Text("Go To Page2")
                Text(isOn.description)
            }
        }
    } detail: {
        Text("NavigationSplitView detail")
    }
}

如果想要將變數isOn傳入給第二頁，而又想要在這兩頁同時同步時，就必須要在第二頁使用@Binding變數來串接。

製作第二頁的內容，將變數使用@Binding來做宣告，@Binding狀態的變數可以在不同頁面時的變化互相同步：

struct SwiftUIView11_Page2: View {
    
    @Binding var isOn: Bool
    
    var body: some View {
        Toggle(isOn: $isOn) {
            Text("Toggle")
        }
        
        Text(isOn.description)
    }
}

而由於isOn變數被宣告為@Binding，所以在更新其資料時，就必須要在前面加上$符號。

回到第一頁，加入一個跳轉到第二頁，也就是SwiftUIView11_Page2的連結，並且直接帶入參數isOn：

@State var isOn: Bool = false
    
var body: some View {
    NavigationSplitView {
        NavigationLink {
            SwiftUIView11_Page2(isOn: $isOn)
                
        } label: {
            VStack {
                Text("Go To Page2")
                Text(isOn.description)
            }
        }
    } detail: {
        Text("NavigationSplitView detail")
    }
}

所以一開始在第一頁時，會顯示false，顯示如圖：

跳轉到第二頁時，將toggle更改為true，顯示如圖：

回到第一頁時，也會同步更新為true，顯示如圖：

從 SwiftUI 到 Apple Vision Pro - SwiftUI 從零開始 Day11 [完]