画面遷移を行う(ナビゲーション遷移)
GZYtech以前は SwiftUIの画面遷移は NavigationLink を使って実施していましたが、Button と組み合わせて使うときには少し手間がかかりました。
iOS16 以降ならば NavigationStack という仕組みができたので、これを使えば Button でナビゲーション遷移するのがとても簡単になります。
下記にコードを示します。
ボタンをつかって @State な var である FlagShowView100 や FlagShowView110 を true にしてやり、それぞれの navigationDestination でフラグを評価して true ならば、定義されているビューにナビゲーション遷移します。
58行目をコメントアウトすると、"TOP画面"という表示は消えます。それぞれの遷移先では "< Back" という戻りタップ表示になるのでご確認ください。
import SwiftUI
struct ContentView: View {
@State var FlagShowView100 = false
@State var FlagShowView110 = false
let FONT_SIZE = 16.0
let TXT_PADDING = 2.0
var body: some View {
// ナビゲーションスタック.
NavigationStack {
ZStack {
// 画面の背景.
Rectangle()
.foregroundColor( .green )
// 画面遷移のボタンを並べる.
VStack {
// --------------------------------
Button {
FlagShowView100 = true
} label: {
Text("画面100へ\nナビゲーション遷移")
.font( .system( size: FONT_SIZE ) )
.foregroundColor( .white )
.padding( TXT_PADDING )
}
.padding()
.background( .blue )
.navigationDestination( isPresented: $FlagShowView100 ) {
View100()
}
// --------------------------------
Button {
FlagShowView110 = true
} label: {
Text("画面110へ\nナビゲーション遷移")
.font( .system( size: FONT_SIZE ) )
.foregroundColor( .white )
.padding( TXT_PADDING )
}
.padding()
.background( .blue )
.navigationDestination( isPresented: $FlagShowView110 ) {
View110()
}
} // VStack end.
} // ZStack end.
.navigationTitle( "TOP画面" ) // ここをコメントアウトして違いを確認しましょう.
} // NavigationStack end.
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
これが画面100のコードです。10行目は struct の定義名称を文字列として取得しています。ここでは "View100" という文字列が取得されます。
import SwiftUI
struct View100: View {
var body: some View {
ZStack {
Color( .orange )
let str = String( describing: type( of: self ) )
Text( str )
.font( .largeTitle )
}
}
}
struct View100_Previews: PreviewProvider {
static var previews: some View {
View100()
}
}
これが画面110のコードです。画面100のコードとほとんど同じです。画面の色が .yellow に変わっているだけです。
import SwiftUI
struct View110: View {
var body: some View {
ZStack {
Color( .yellow )
let str = String( describing: type( of: self ) )
Text( str )
.font( .largeTitle )
}
}
}
struct View110_Previews: PreviewProvider {
static var previews: some View {
View110()
}
}
NavigationStack は本当に便利ですね。
