Swift・iOS

Swiftを中心に学んだことを記録に残すブログです。技術に関係ない記事もたまに書いています。

【SwiftUI】ListからNavigationLinkで画面遷移する

iOS Swift SwiftUI List

 

はじめに

【SwiftUI】セクションごとに分けてListを表示する - Swift・iOSの続きです。今回はListからNavigationLinkを使って画面遷移する実装を試したので記事に残します。

 

開発環境

 

サンプルイメージ

f:id:hfoasi8fje3:20210328150823p:plain  f:id:hfoasi8fje3:20210328150842p:plain

 

実装

SettingView.swift

import SwiftUI

struct SettingView: View {
    struct SettingTitle: Hashable, Identifiable {
        var id = UUID()
        var title : String
    }
    
    struct Setting: Identifiable {
        var id = UUID()
        var header: String
        var settingTitles: [SettingTitle]
    }
    
    var settings: [Setting] = [
        Setting(header: "ブックマーク",
                settingTitles: [SettingTitle(title: "編集")]),
        Setting(header: "その他",
                settingTitles: [SettingTitle(title: "プライバシーポリシー"),
                                SettingTitle(title: "ライセンス"),
                                SettingTitle(title: "バージョン")])
    ]
    
    var body: some View {
        NavigationView {
            VStack(alignment: .leading) {
                List {
                    ForEach(settings) { setting in
                        Section(header: Text(setting.header)) {
                            ForEach(setting.settingTitles) { titles in
                                NavigationLink(
                                    destination: SampleView(text: titles.title),
                                    label: {
                                        Text(titles.title)
                                    })
                            }
                        }
                    }
                }
                .listStyle(InsetGroupedListStyle())
                .navigationTitle("設定")
            }
        }
    }
}

 

SampleView.swift

import SwiftUI

struct SampleView: View {
    var text: String
    
    var body: some View {
        Text("設定画面の\"\(text)\"から画面遷移した")
    }
}

struct SampleView_Previews: PreviewProvider {
    static var previews: some View {
        SampleView(text: "test")
    }
}

 

SceneDelegate.swift

実際にサンプルコードを動かしてみたい場合は、SceneDelegate.swiftの"scene(_:willConnectTo:options:)"を以下のように変更してください。

f:id:hfoasi8fje3:20210328151428p:plain

 

おわりに

NavigationLinkではなくモーダルビューで画面遷移する方法も試したので、また別途記事にしようと思います。

 

参考