[SwiftUI]リスト(List)の要素のタップで画面遷移するには？

どうも、ちょげ(@chogetarou)です。

リストの要素をタップした際に、画面遷移する方法を紹介します。

方法
使用例

方法

Listの要素のタップで画面遷移するには、NavigationViewとNavigationLinkを使います。

まず、ListをNavigationViewで囲みます。

次に、タップで画面遷移させたいリストの要素をNavigationLinkで囲います。

そして、NavigationLinkの引数「destination」に画面遷移先のViewを指定します。

NavigationView {
    List {
       NavigationLink(destination: /*遷移先のビュー*/ ) {
           //リストの要素
       }
    }
}

NavigationViewとNavigationLinkを使えば、リストの要素のタップで画面遷移することができます。

使用例

以下は、使用例です。

struct ContentView: View {
    var colors : [Color] = [.red, .blue, .yellow, .green, .purple]
    var body: some View {
        NavigationView {
            List {
                ForEach (colors, id: \.self) { color in
                    NavigationLink(destination: DetailView(color: color) ) {
                            Text("Push")
                        }
                    
                }
            }
        }
    }
}

struct DetailView : View {
    let color : Color
    var body: some View {
        
        Rectangle()
            .foregroundColor(color)
    }
}