初心者でもわかるswiftUI Vol.9
どうも、もう1週間ぐらい東京にいたいと思ってしまっているかわさきです。
前回はボタンのことをまとめたので、今回は画面遷移のことについてまとめたいと思います。
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情報発信」というところにまとめているので見返してみて下さい。
読んでいただきありがとうございます😊
読んでくださった方はぜひハートをお願いします✋
この記事が気に入ったらサポートをしてみませんか?