SwiftUIでいこう！ - 画面遷移を使ったアプリ。

参考サイトを見ながら作りながらまとめて概略的に記録します。基本的な動きは以下のものと同じような感じになります。画面切り替えがスクロールではなくて切り替えるようにします。このアプリの画面切り替えのポイントを記録します。

ライフサイクルを図示してみます。

@mainでの起動して画面を切り替えます。設定画面もあります。

切り替えのポイントとしては

・@main　(@AppStorageでの起動時の状態記録)での起動
・@AppStorageでの状態での画面の切り替え
・NavigationLinkでの画面遷移
・sheetを使って画面の表示
・@Environmentを使って画面を閉じて元の画面を表示

@main　(@AppStorageでの起動時の状態記録)での起動

@main
struct 　TestApp: App {
   
   var body: some Scene {
       WindowGroup {
  　　   ContentView()
   }
}

基本的な@mainのコードです。

アプリ起動時にどのコードを使うかを指定します。この場合は 

ContentView()

が最初に読み込まれます。

@AppStorageでの状態での画面の切り替え

AppStorage | Apple Developer Documentation

iOS 14 における SwiftUI の新機能: @AppStorage, @SceneStorage, SwiftUI app - Qiita

UserDefaultsを使って保存をするための"property wrapper"です。

@AppStorage("isOnbord") var isOnbord: Bool = true

として真偽を保存しておいて、

 var body: some Scene {
       WindowGroup {
  
           if isOnbord {
               OnbordView()
           }
           else{
               ContentView()
           }
       }
   }

真偽によって画面を選択して表示させます。 

 OnbordView()とContentView()の2つの画面についてですが、この場合は

 OnbordView()の中で"Button"を構造体"StartButtonView"で作ったものを組み込んでいます。

"OnbordView()"画面でボタンを押したタイミングで"true"をfalse"にすことでContentView()に表示が切り替わります。

 Button(action: {
           isOnbord = true
       })

NavigationLinkでの画面遷移

ContentView()は"RowView"をテンプレートに List形式で表示させています。

NavigationView{
           List{

その画面遷移方法としては、"NavigationLink"を使います。

NavigationLink(
           destination: DetailView(card: item)){
                      RowView(card: item)
                           .padding(.vertical,4)
           }

"RowView"で表示されているデータ（表形式）にタッチすることで

DetailView()

に画面を遷移させます。

sheetを使って画面の表示

ContentView()の画面からは設定の画面にも行けるようにしています。そこで

sheet

を使います。

 @State var showSettingView:Bool = false

変数宣言しておきます。

.navigationBarItems(
trailing:
Button(action: {
　　self.showSettingView.toggle()
}){
　Image(systemName: "paintbrush")
　}
　.sheet(isPresented: $showSettingView) {
　　SettingView()
}

変数showSettingViewの真偽でSettingView()を呼び出します。

@Environmentを使って画面を閉じて元の画面を表示

このSettingView()ですが以下を使って

@Environment(\.presentationMode) var presentationMode

コードとしては

 .navigationBarItems(
           trailing:
               Button(action: {
                    presentationMode.wrappedValue.dismiss()
               }){
                     Image(systemName: "xmark")
                 }

presentationMode.wrappedValue.dismiss()

というコードで"xmark"で表示される"X"を押すことで画面が元の画面に戻ります。