【SwiftUI】リスト表示とナビゲーションリンク

SwiftUIのリストを使って本の一覧を表示するアプリを作ってみました。

機能としては以下のとおり。

  • リストを使って、本のタイトル、画像、値段を一覧で表示
  • ナビゲーションリンクを使って、リストがタップされると詳細を表示するViewに移動する

本のデータを構造体で管理する

表示する本を管理するための構造体を作ります。

Identifiableプロトコルを使うと、List(){ item in }の形式で表示できるようになります。

Identifiableを使うには、ユニークなidを構造体内に作る必要があります。

行のViewを作る

リストの各行に表示するViewを作ります。

Viewと言っても、写真とタイトルをHStackを使って横並びにするだけです。

詳細なViewを作る

こちらはVStackを使って縦表示にしましょうか。

ContentView

今まで作ってきたViewや本のデータを使って、ContentViewを作ります。

ポイントはNavigationLinkを使って、詳細ページへのリンクを作っているところです。

以下の本を参考にしたのですが、分かりやすくて良い感じでした。

オススメの本です。

詳細! SwiftUI iPhoneアプリ開発入門ノート iOS 13 + Xcode11対応 (日本語) 単行本 – 2019/12/21

ABOUTこの記事をかいた人

のっくん

個人アプリ開発者。Python、Swift、Unityのことを発信します。月間2.5万PVブログ運営。 Twitter:@yamagablog