#100DaysOfSwiftUI Day60 Challengeをやってみる (Step3 : ユーザー詳細画面実装)

メインウィンドウにユーザーをリスト表示することができるようになったので、詳細画面を作ります。

手順は、以下の通り

  • DetailViewの大枠作る
  • NavigationLink作る
  • DetailViewの作り込み
  • Refactoring

DetailViewを作る

UserDetailViewという名前でViewを作りました。
このビューは、Userを受け取って表示するはずなので、まずは、Userを持つようにしました。
また、Previewを見るためには、以前、メインビューのPreview用にUserのinitializerを利用しました。(少しアップデートしてます)

NavigationLinkを作る

ContentView.swiftの方に戻って、各Userの行をNavigationLinkにしていきます。

シミュレータで、ユーザーの行をタップして、UserDetailViewに遷移することを確認します。

UserDetailViewを作り込む

適当に(?)作りました。

次のステップのポイントになるのは、Friendなので、それを表示してあとは、適当です。
なお、上記のListで処理するために、Friendクラスを、IdentifiableにConformしている宣言を追加しました。(実際しています)

いそいそとテストしようとして、Tags情報がきちんと読み込まれていないことわかりました!

Codable again:(

Userの配列 <-> UserList の関係では、無名リストの扱いに気をつけなければいけませんでした。このTagのケースでは、Tagsというキーに保存されているのが、無名要素のリストであるということでした。(JSONについての経験があまりないので、少し変わった(?)構成になるとその度にハマってます。)

このTagのようなケースでは、singleValueContainerというものを使って、アクセスするようです。以下、Tagのdecodeのコードです。

Encodeも気を付けないといけません。(今回のケースでは使われません)

せっかくなので、DetailViewにTagを表示するListも追加しました

Tag読み込みに苦労したので、DetailViewにTagを表示するListを追加しました。

あわせて、Sectionにタイトルをつけています。このあたりは、凝り始めるとエンドレスだと思うので、これくらいにしておきます。

ここまでにできた、UserDetailViewの表示
Day60DataLoadedMoreImproved

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です