SwiftUI List 画面遷移とタイトルの配置

個々のページをリストに表示

SwiftUIで、配列の値をリストに表示して、詳細ページに渡す例はよく見かけますが、１個、１個、ページを作る例は中々見かけません。

今回は、その機能を使いたかったのでデモアプリを作ってみました。NavigationStackの中に、Listを作成して、NavigationLinkを作成すると、指定したページへ画面遷移するListを作成することができました。

navigationTitleが、左によってしまっているので、中央に寄せて見栄えを良くしたい。navigationBarTitleDisplayMode(.inline)を使うと解決できた。

import SwiftUI

struct SettingView: View {
    var body: some View {
        NavigationStack {
            List {
                NavigationLink(destination: TermsOfServiceView()) {
                    Text("利用規約")
                }
                NavigationLink(destination: PrivacyPolicyView()) {
                    Text("プライバシーポリシー")
                }
                NavigationLink(destination: ContactView()) {
                    Text("お問い合わせ")
                }
            }
            .navigationTitle("設定")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

struct TermsOfServiceView: View {
    var body: some View {
        Text("利用規約の内容")
    }
}

struct PrivacyPolicyView: View {
    var body: some View {
        Text("プライバシーポリシーの内容")
    }
}

struct ContactView: View {
    var body: some View {
        Text("お問い合わせフォーム")
    }
}

#Preview {
    SettingView()
}

まとめ

Listに指定したページへ画面遷移する方法を今回はご紹介いたしました。よくある設定画面の作成に活かしてみてください。