Swiftでアプリ。- ListでJSONを使う。

JSONデータを使えるデータに(デコード)してリスト表示させて、そのリストから選んだものの詳細画面を別Viewで作り遷移できるようにします。

WebAPIで取得したデータを使ってリストに書き出していますが、このリストからさらに詳細画面に遷移させます。

NavigationLink

を使います。

遷移するだけではなく、遷移先のデータをリストの項目についての詳細、JSONデータの同じデータを利用して表示させるようにします。

まずは利用するJSONデータを追加します

JSONデータを使うための構造体ですが修正前は

struct QiitaArticle: Decodable, Identifiable {
    let id: String
    let title: String
}

ですが、詳細画面として使うために利用しているQIITAのJSONのデータを調べて使えそうなものを探してみると、"body"というタグがあったのでそれを使ってみます。以下のようにして構造体"QiitaArticle"に組み込みます。

 let body:String

を追加します。最終的に

struct QiitaArticle: Decodable, Identifiable {
    let id: String
    let title: String
    let body:String
}

とします。

方法は

@State private var articles = QiitaArticle

として変数articlesにデータがデコードされ入ってくるデータをarticleとして一つずつデータを取り出し利用していきます。

    List(articles) { article in
          NavigationLink(destination: DetailView(item: article)){
                    Text(article.title)
          }
    }

"NavigationLink"で遷移先の"DetailView(item: article)"を指定します。それに引き続きリスト表示させる" Text(article.title)"を書いています。

表示としてはリストの右端に矢印が表示されます。

ContentViewの画面構成はこれだけですが、遷移先のViewを作らないといけません。 DetailViewを新規ファイル、SwiftUIファイルを作って編集していきます。

最小限の構成です

import SwiftUI

struct DetailView: View {
    
    var item:QiitaArticle
    
    var body: some View {
      
        ScrollView (.vertical) {
            Text(item.body)
        }

    }
}

これでリストの項目を選ぶと

こんな感じの詳細画面に遷移できるようになります。

ContentViewでは" Text(article.title)"で表示されているリストの項目を押すと同時に"(destination: DetailView(item: article))"が実行され、新しく作った"DetailView"に個別データの"article"が渡され遷移するという仕組みです。

遷移先のDetailViewでは受け取ったデータを使って"Text(item.body)"として表示されます。