初心者でもわかるswiftUI Vol.９

どうも、もう１週間ぐらい東京にいたいと思ってしまっているかわさきです。

前回はボタンのことをまとめたので、今回は画面遷移のことについてまとめたいと思います。

20.Push

コードを書いてビルドするとわかってもらえると思いますが、Pushというのは簡単に言うと横方向に画面が遷移することです。

ChildViewファイルを新規作成してください。そしてContentViewを下記のコードに変更してみましょう。

VStack {
           NavigationView {
               NavigationLink(destination: ChildView()) {
                   Text("画面遷移（Push）")
               }.navigationBarTitle(Text("ContentView"))
           }
       }

するとこのような画面になります。

青く表示されているボタンを押すと、、、

ChildViewのテキストも変えると二枚目のテキストが変わります。

PushはNavigationLink(destination:"ここにファイル名")を入れることでできます。

21.Modal

次の遷移はModalです。これはわかりやすく言うと、下から画面が出てくるやつです。みなさん体験したことあります笑

ModalViewを用意してください。

import SwiftUI
struct ModalView: View {
   
   @State var isShow = false
   
   var body: some View {
           
               VStack(alignment: .center) {
                   NavigationView {
                       Text("Modal View")
                   }.sheet(isPresented: self.$isShow) {
                       ChildView()
                   }
                   
                   Button(
                       action: {
                           self.isShow = true
                   },
                       label: { Text("画面遷移（Modal）") }
                   )
               }
   }
 }

var、つまり変数の説明は僕じゃうまくできないのでこの画像を見て理解してください笑
使っていくうちに慣れてくると思います。

上記のコードを入力すると、

下の方にある青いボタンを押すと、下から画面が出てきます。

これも、結構使います。主に決済の画面とかによく使われていると思います。

22.Tab

出ましたタブ！これは、携帯の下に出ているボタンのやつですね。ほぼほぼのアプリがこれを使ってるのではないでしょうか。

TabNavViewを用意してください。

TabView {
   Text("First")
       .tabItem {
           Image(systemName: "house")
           Text("Home")
       }
   Text("Second")
       .tabItem {
           Image(systemName: "pencil")
           Text("Post")
       }
       Text("Third")
       .tabItem {
           Image(systemName: "person")
           Text("Menu")
       }
}.accentColor(.purple)

accentColorはボタンの色です。何個も箱を作ってそこに表示するテキストなどを書いていく感じでしょうか。

Tabの問題点が一つあって、色んな動作をいっぱい入れようとすると暴走するんです笑
兄もこれには苦しめられていました。実際にアップルにも報告されているバグです。気にせずいきましょう笑

いい感じです！今日はここまで！

まとめ

今日は画面遷移のことについてまとめました。

全て頻繁に使うものなのでしっかり自分のものにしていきましょう。
これからもっと複雑になってきますが、丁寧に説明していきたいと思います。

画面の表示が変わらない時は、WindowGroupのところを変えてみてください。

今までの内容は「プロフィール→マガジン→swiftUI情報発信」というところにまとめているので見返してみて下さい。

読んでいただきありがとうございます😊

読んでくださった方はぜひハートをお願いします✋