New SwiftUI - WWDC22- NavigationStack

WWDC22で発表されたSwiftUIに追加された新しい機能を試していきます。

最初は

"NavigationStack"

Apple Developer Documentation

XcodeのPlaygroundで基本形を実行してみます。

import SwiftUI
import PlaygroundSupport

struct ContentView: View {
    var body: some View {
        NavigationStack {
            NavigationLink("linkName",value:"stringVlue")
                .navigationDestination(for: String.self){value in
                    Text("Detail = \(value)")
                }
        }
    }
}

PlaygroundPage.current.liveView = UIHostingController(rootView: ContentView())

"NavigationStack"を使って画面遷移をさせるコードです。

NavigationLink("linkName",value:"stringVlue")

"linkName"が画面上に表示されます。これを押すと、,value:"stringVlue"をデータとして別画面に渡します。

.navigationDestination(for: String.self){value in
　　Text("Detail = \(value)")

別画面で"Detail = \(value)"を表示します。"value"にはNavigationLinkで渡した"stringVlue"を使います。

Listを使ったものの例示として

NavigationStack en SwiftUI #WWDC22

がわかりやすいです。

struct Fruit: Hashable, Identifiable {
    var id = UUID()
    var name: String
}

var fruits: [Fruit] = [
    .init(name:"🍊 Orange"),
    .init(name:"🍏 Apple"),
    .init(name:"🍒 Cherries"),
    .init(name:"🍌 Banana"),
    .init(name:"🍓 Strawberry"),
    .init(name:"🍉 Watermelon"),
    .init(name:"🍋 Lemon"),
    .init(name:"🫐 Blueberries")
]

構造体"Fruit"をもとに配列" fruits"を作っています。これを表示させる" ContentView"を作ります。

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List(fruits) { fruit in
                NavigationLink(fruit.name, value: fruit)
            }
            .navigationTitle("Fruits")
            .navigationDestination(for: Fruit.self) { fruit in
                Text(fruit.name)
            }
        }
    }
}

新しく導入された

NavigationStack

を使い、List()で配列を作ります。中身は

NavigationLink(fruit.name, value: fruit)

画面には、"fruit.name"が表示されてその表示部分をタップすると新しい画面に遷移して"value:fruit"と指定したでデータ:fruitを".navigationDestination"に渡します。

.navigationDestination(for: Fruit.self) { fruit in
　　Text(fruit.name)
}

新しい画面はこの渡されたデータ" fruit"を使って"Text(fruit.name)"で画面表示sせます。

Path

Pathを使うことで任意のページからスタートすることができます。

struct Developer: Hashable {
    let name: String
}

struct ContentView: View {
    @State private var path = NavigationPath()
    let developer: Developer = .init(name: "SwiftBeta")
    
    var body: some View {
        NavigationStack(path: $path) {
            Form {
                Section {
                    NavigationLink(developer.name, value: developer)
                }
                Section {
                    List(fruits) { fruit in
                        NavigationLink(fruit.name, value: fruit)
                    }
   
                }
            }
            .navigationTitle("Fruits")
            .navigationDestination(for: Fruit.self) { fruit in
                Text(fruit.name)
            }
            .navigationDestination(for: Developer.self) { developer in
                VStack {
                    Image(systemName: "laptopcomputer")
                    Text(developer.name)
                }
                .font(.largeTitle)
            }
        }
        .onAppear {
            path = NavigationPath([fruits[7], fruits[0]])
            path.append(developer)
        }
    }
}

@State private var path = NavigationPath()

と変数宣言して

NavigationStack(path: $path){]

を追加してモディファイア

 .onAppear {
            path = NavigationPath([fruits[7], fruits[0]])
            path.append(developer)
        }

をつけます。これで起動すると最初に

path.append(developer)

で追加された"developer"画面が表示されます。あとは上部左側の画面表示されている"<Back"タップすれば順番にfruits[0]、fruits[7]のデータが表示されます。