【SwiftUI】@Bindingの使い方

## はじめに
@Binding の使い方

異なるView間で値を共有する方法として`@Binding`を用いる


## 環境
SwiftUI
Xcode: 13.3.1


## Code


### `@State`を用いて値を渡す場合
```swift: HomeView
struct HomeView: View {

    @State var showNextPage = false
    @State var button = false
    
    var body: some View {
        NavigationView{
            VStack{
                Text("Home page")
                Button {
                    self.button.toggle()
                } label: {
                    Text(self.button.description)
                        .foregroundColor(Color.white)
                        .padding()
                }
                .padding()
                .background(self.button ? Color.blue : Color.red)
                .cornerRadius(30)
                
                NavigationLink("go next page", isActive: $showNextPage) {
                    NextPageView(button: $button)
                }
            }
        }
    }
}

```

```swift:NextPageView
struct NextPageView: View {
    
    @State var button : Bool
    
    init(button: Bool ){
        self.button = button
    }
    
    var body: some View {
        VStack{
            Text("Next Page")
            Button {
                self.button.toggle()
            } label: {
                Text(self.button.description)
                    .foregroundColor(Color.white)
                    .padding()
            }
            .padding()
            .background(self.button ? Color.blue : Color.red)
            .cornerRadius(30)
        }
    }
}
```

![Sep-01-2022 19-25-27.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821152/1e3b9efc-b84e-a097-414f-7ed5fe859de4.gif)

HomeView -> NextPageView へは値が影響するが、
HomeView <- NextPageView  へは値が影響しない。


　　　
　　　
### `@Binding`の場合

```swift: HomeView
struct HomeView: View {

    @State var showNextPage = false
    @State var button = false
    
    var body: some View {
        NavigationView{
            VStack{
                Text("Home page")
                Button {
                    self.button.toggle()
                } label: {
                    Text(self.button.description)
                        .foregroundColor(Color.white)
                        .padding()
                }
                .padding()
                .background(self.button ? Color.blue : Color.red)
                .cornerRadius(30)
                
                NavigationLink("go next page", isActive: $showNextPage) {
                    NextPageView(button: $button)
                }
            }
        }
    }
}

```


```swift:NextPageView
struct NextPageView: View {
    
    @Binding var button : Bool
    
    init(button: Binding<Bool> = .constant(false) ){
        _button = button
    }
    
    var body: some View {
        VStack{
            Text("Next Page")
            Button {
                self.button.toggle()
            } label: {
                Text(self.button.description)
                    .foregroundColor(Color.white)
                    .padding()
            }
            .padding()
            .background(self.button ? Color.blue : Color.red)
            .cornerRadius(30)
        }
    }
}
```


![Sep-01-2022 19-12-53.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821152/a26d450a-f806-4a80-c9ba-2f73ca718abc.gif)

View間の値が互いに影響する。