SwiftUIでのNavigationLinkを使って画面遷移
公開日: 2023-10-02 22:02:49
更新日: 2024-02-07 00:31:50
SwiftUIでNavigationLinkを使った基本的な画面遷移コードです。
今回は
・画像をタップしたらSecondViewへ画面遷移
・ボタンをタップしたらSecondViewへ画面遷移
する方法を載せておきます。
iOS16でエラーが出て詰まったので、こちらを使えば大丈夫です。
import SwiftUI
struct ContentView: View {
// このViewの本体
var body: some View {
// NavigationViewを使用して、画面遷移のサポートを提供
NavigationView {
// GeometryReaderを使って、親ビューのサイズや位置にアクセス
GeometryReader { geometry in
// VStackを使用して、縦方向にビューを積む
VStack(alignment: .center) { // 内容は中央揃え
// 画像をタップすると、SecondViewへ遷移
NavigationLink(destination: SecondView()) {
// 画像の設定
Image("DynamicUnko")
.resizable() // 画像のサイズを変更可能に
.scaledToFill() // 画像をフレームに合わせてスケール
.frame(width: geometry.size.width * 0.8,
height: geometry.size.height * 0.1) // 画面の80%の幅と10%の高さ
.clipped() // 画像をフレームにクリップ
}
.padding() // 周りにスペースを追加
// テキストボタンをタップすると、SecondViewへ遷移
NavigationLink(destination: SecondView()) {
// テキストの設定
Text("Go to Detail View")
.frame(width: geometry.size.width * 0.8,
height: geometry.size.height * 0.1) // 画面の80%の幅と10%の高さ
.foregroundColor(.white) // 文字色を白に設定
.background(Color.blue) // 背景色を青に設定
.cornerRadius(10) // 角を丸くする
}
}
// VStackを画面の上部に固定し、左右は中央揃え
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
}
}
// iPadでのサイドバー表示を避けるためのスタイル設定
.navigationViewStyle(StackNavigationViewStyle())
}
}

