Swiftでアプリ。- ListでJSONを使う。
JSONデータを使えるデータに(デコード)してリスト表示させて、そのリストから選んだものの詳細画面を別Viewで作り遷移できるようにします。
WebAPIで取得したデータを使ってリストに書き出していますが、このリストからさらに詳細画面に遷移させます。
を使います。
遷移するだけではなく、遷移先のデータをリストの項目についての詳細、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)"として表示されます。
この記事が気に入ったらサポートをしてみませんか?