![見出し画像](https://assets.st-note.com/production/uploads/images/87057250/rectangle_large_type_2_7a44e4ad85b725e21c26d022a8ecf297.png?width=800)
Swiftでアプリ。- NavigationLink。
画面を切り替えて使えるようにする(画面遷移)ためにNavigationLinkが便利に使えます。
iOS16になりNavigationLinkと一緒に使っていたNavigationViewが非推奨(使えないようにる) ことで、
NavigationStack
NavigationSplitView ・・・ 2、3カラムで表示させたい時に使います
を使いなさいということになりました。
![](https://assets.st-note.com/img/1663449902188-NdeSUAkncN.png?width=800)
なのでNavigationStackを使ってみます。(Xcodeでやってます)
struct ContentView: View {
var body: some View {
NavigationStack{
NavigationLink("別の画面へ", destination: Text("Hello!"))
}
}
}
![](https://assets.st-note.com/img/1663450273866-CSMprBGLce.png)
実行すると
![](https://assets.st-note.com/img/1663450462387-yrV1hYqYr5.png)
もとにBack(戻れるボタン)が表示されて真ん中にHello!と出てきます。Backを押せば元の画面へ戻ります。
別の書き方では
NavigationStack{
NavigationLink("別の画面へ"){
Text("Hello")
}
}
でもできます。
別画面へ遷移させ詳細な情報を表示させたい場合は
構造体を作り
struct ColorDetail: View {
var color: Color
var body: some View {
color.navigationTitle(color.description)
}
}
それを反映させるコードを書くことができます。
struct ContentView: View {
var body: some View {
NavigationStack {
List {
NavigationLink("Mint") { ColorDetail(color: .mint) }
NavigationLink("Pink") { ColorDetail(color: .pink) }
NavigationLink("Teal") { ColorDetail(color: .teal) }
}
.navigationTitle("Colors")
}
}
}
表示させてみるとリスト形式で表示され
![](https://assets.st-note.com/img/1663536956886-SbVK9YTrTX.png)
Mintを押してみると構造体で指定いしたものが表示されます。
![](https://assets.st-note.com/img/1663537003146-z5yi5cirMR.png)
"navigationDestination"を使う方法もあります。
NavigationStack {
List {
NavigationLink("Mint", value: Color.mint)
NavigationLink("Pink", value: Color.pink)
NavigationLink("Teal", value: Color.teal)
}
.navigationDestination(for: Color.self) { color in
ColorDetail(color: color)
}
.navigationTitle("Colors")
}
この記事が気に入ったらサポートをしてみませんか?