[SwiftUI]What I wear counter/着た回数カウンタ - (2) Layout & Navigation

前回、CoreDataについて基本を勉強したので、早速、アプリ作成に着手します。

まずは、各Viewのレイアウトを検討。

①List View

・アプリ起動時に表示する。

・記録したいアイテムが一覧になっている。

ListのSectionは、”Section(header: XXX){}”でOK。分かりやすい！

②Add Item View

・新しく登録するItemの情報を入力できる。

Pickerは、こちらを参考にして"SegmentedPickerStyle"にしました。

③Detail View

・リストで選択したItemの情報を確認できる。

・該当のItemの登録内容を変更できる。

ButtonのImageにはSF Symbolsを利用。

以上、各Viewのレイアウトができたので、次にNavigation（画面遷移）を追加。

SwiftUIでは、NavigationLinkというのでできるらしい。

こちらの記事を参考にしました。

https://dev.to/gualtierofr/navigation-in-swiftui-1hg2

【1つ目】①List → ②Add Item View

【2つ目】①List → ③Detail View

の2つの遷移パターンがあるので、isActiveパラメータに別の変数をセットする方向で。

まずは、【1つ目】のボタンのタップで遷移するパターン。

”NavigationLink(destination: AddItemView(), isActive: $toAdd){EmptyView()}” を追記し、

”toAdd”という変数をButton Actionでtrueに変更すると、

ボタンのタップでdestinationのViewに遷移できる。

遷移後の画面には自動で元のViewに戻るリンクがNavigationBarに！

次に、【2つ目】のリスト項目から遷移するパターン。

リスト項目中身をNavigationLinkの中に入れると、リストの各項目の横に「>」が付き、

指定したViewに遷移できるように。

「戻る」ボタンについては、こちらのバグがあり、解決策を結構探したのですが、

結局、実機でテストすれば問題ないとのことで、解決はしない方向にしました。

次は、Item情報をDynamicに反映できるようにしたいと思います。