はじめてのSwift UI③

# はじめに
[はじめてのSwift UI②](https://qiita.com/atsu123456789/items/682bce5cab3649363013)

3記事目！一旦これで基礎的な部分の記事は終わりにしようと思います〜

# sheet
- 別の画面を表示させるためのもの
- 別の画面が全体を覆うわけではなく、部分的に覆う

``` ContentView.swift
import SwiftUI

struct ContentView: View {
    
    @State var showingSheet = false
    
    var body: some View {
        Button(action: {
            showingSheet = true
        }) {
            Text("sheetを表示")
        }
        .sheet(isPresented: $showingSheet, content: {
            SheetView()
        })
    }
}

struct SheetView: View {
    var body: some View {
        Text("SheetView")
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .environmentObject(UserData())
    }
}
```

これでボタンが押されたときにsheetで定義された内容が表示される。

# @Binding
- View間でデータを共有できるようにするもの
- データが更新された場合、もう片方のViewのデータも更新

``` ContentView.swift
import SwiftUI

struct ContentView: View {
    @State var isShowing = false
    
    var body: some View {
        Button(action: {
            isShowing = true
        }) {
            Text("AnotherViewを出す")
        }
        .sheet(isPresented: $isShowing, content: {
            AnotherView(isShowing: $isShowing)
        })
    }
}

struct AnotherView: View {
    @Binding var isShowing: Bool
    
    
    
    var body: some View {
        Text(isShowing.description)
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .environmentObject(UserData())
    }
}
```

# fullScreenCover
- sheetとは違い、別の画面が部分的に覆うわけではなく、全体的に覆う

``` ContentView.swift
import SwiftUI

struct ContentView: View {
    @State var showingFullScreenCover = false
    
    var body: some View {
        Button(action: {
            showingFullScreenCover = true
        }) {
            Text("fullScreenCoverを表示")
        }
        .fullScreenCover(isPresented: $showingFullScreenCover, content: {
            fullScreenCoverView()
        })
    }
}

struct fullScreenCoverView: View {
    var body: some View {
        Text("fullScreenCoverView")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .environmentObject(UserData())
    }
}
```

# Toggle
- ON/OFFを切り替えられるようにするためのもの
- Toggleで使うbool型の変数には@Stateをつける

``` ContentView.swift
import SwiftUI

struct ContentView: View {
    @State var flag = true
    
    var body: some View {
        Toggle(flag.description, isOn: $flag)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .environmentObject(UserData())
    }
}
```

↓こんな感じ。よく見るやつが書ける
![スクリーンショット 2023-06-22 21.16.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1193085/f4e91d7f-ba01-2e2d-d8c5-dce333105047.png)

# ボタンを押せなくする
- Buttonにdisabledというモディファイアをつける

``` ContentView.swift
import SwiftUI

struct ContentView: View {
    @State var isDisabled = false
    
    var body: some View {
        Button("ボタン") {
            isDisabled = true
        }
        .disabled(isDisabled)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .environmentObject(UserData())
    }
}
```

↓こんな感じ。一度ボタンを押したら押せなくなる
![スクリーンショット 2023-06-22 21.21.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1193085/2eac8898-0102-6aa3-7e90-c3dde8eb0de1.png)

# Toggleをカスタマイズする
- ToggleStyleというプロトコルに準拠した構造体を作る

``` ContentView.swift
import SwiftUI

struct ContentView: View {
    @State var isMan = true
    
    var body: some View {
        Toggle("Toggle", isOn: $isMan)
            .toggleStyle(GenderToggleStyle())
    }
}

struct GenderToggleStyle: ToggleStyle {
    func makeBody(configuration: Configuration) -> some View {
        HStack {
            Button("男性") {
                configuration.isOn.toggle()
            }
            .disabled(configuration.isOn)
            
            Button("女性") {
                configuration.isOn.toggle()
            }
            .disabled(!configuration.isOn)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .environmentObject(UserData())
    }
}
```

↓こんな感じ
![スクリーンショット 2023-06-22 21.31.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1193085/e6bf0847-0286-1fbc-6d81-7a02ddcb62da.png)

# さいごに
ここまで勉強してきてなんとなくSwift UIの書き方がつかめてきました。
次はより実践的なアプリを作っていこうと思います。
最後まで読んでくれてありがとうございました～

# 参考文献
https://www.udemy.com/course/swiftui-ios-iphone/?utm_source=adwords&utm_medium=udemyads&utm_campaign=DSA_WebIndex_la.JA_cc.JP&utm_content=deal4584&utm_term=_._ag_89101504074_._ad_624699263400_._de_c_._dm__._pl__._ti_dsa-454026085647_._li_1009050_._pd__._&gclid=CjwKCAjwv8qkBhAnEiwAkY-ahmilHuWoL7OQRFZ3dMIu6-F-zFWlsRj16En4BE4ckq0Ga_OA7eK-RBoC2AMQAvD_BwE