[SwiftUI]Baker's % Calculator /ベイカーズ％計算 - (2) Modal View

パンのレシピの各分量からBaker's %を算出するアプリの続きです。

今日は、分量を入力する部分に挑戦。（右側部分）

アラート表示に入力フィールドを設定すればよいかな、と思っていたものの、

SwiftUIのAlertには無く、ちょっと面倒な印象。（参考：リンク）

こちらのブログを参考に、Modal Viewで作ることにしました。

https://blog.appsbymw.com/posts/how-to-present-and-dismiss-a-modal-in-swiftui-155c/

まずは、Listに入力画面を開くボタンを設定。

ボタンのイメージにSF Symbolsを利用。

ダウンロードしたら、Image(systemName: "pencil")と使いたい画像の名前を入力するだけ。

画像を用意する手間が省けて素晴らしい！

ボタンのタップが認識されているか、念のためSimulatorで確認。

EditViewという名前で入力用の画面を用意。

TextFieldの概要は、こちらのブログを参考にざっくり理解。

数字のみ入力可能にする .keyboardType(.numberPad) はこちらで見つけました。

「Ingredient」の部分は、リストの選択されたものを表示したい。。

が、先に、List ViewからModalを表示する部分を。

ButtonのActionで「self.show_modal = true」と変更して、

それを、「.sheet(isPresented: self.$showsModal) {EditView()}」部分が受け取る、

という感じかな、と理解。

無事、ButtonのタップでModal Viewが表示できるように。

ちゃんと入力もできることも確認。

「Ingredient」の部分にリストの選択されたものの名前を表示するのは、

こちらの動画を参考にしました。

List View側は、表示するModal Viewに渡す「item」を「EditView(ingredient: item)」と指定し、

Modal View側で受け取れるように変数を設定。

といった感じで入力画面の出来上がり。

次は、入力した内容をリスト側に反映＆Baker's %計算部分に着手したい。