初心者でもわかるswiftUI Vol.１１

どうも、完全に「鬼滅の刃」にハマっているかわさきです。

前回はテキストフィールドの基本的な内容についてまとめたので、今回は応用して個数計算のようなものを作っていきたいと思います。
先日買った参考書にいい感じのが載っていたんです笑

24.テキストフィールドを使った個数計算

KosuuViewというダサい名前のファイルを用意してください。

struct KosuuView: View {
   @State var kosu:String = ""
   let tanka:Double = 250
   let tax:Double = 1.0
   
   var body: some View {
       
       ZStack {
           Color.white
               .onTapGesture {
                   UIApplication.shared.endEditing()
               }
       VStack (alignment: .leading) {
           HStack {
               Text("個数：")
                   .padding(.horizontal,0)
               TextField("0",text: $kosu)
                   .textFieldStyle(RoundedBorderTextFieldStyle())
                   .keyboardType(.numberPad)
                   .frame(width: 100)
           }
           .font(.title)
           .frame(width: 200)
           Group {
           if kosuCheck(min: 1, max: 10) {
               Text("\(price())円です")
                   .font(.title)
           }
           else {
               Text("個数は１〜１０個を入れてください")
                   .foregroundColor(.red)
                   .font(.headline)
                }
           }.frame(width: 300, height: 25)
       }.position(x:200, y:200)
       }
   }
   func kosuCheck(min:Int, max:Int) -> Bool {
       guard let num = Int(kosu) else {
           return false
       }
       return (num >= min && num <= max)
   }
   func price() -> Int {
       if let num = Double(kosu) {
           let result = Int(tanka * num * tax)
           return result
       }
       else {
           return -1
       }
     }
}

StateとStringのところは前回説明したので大丈夫だと思います。
単価は250円に設定しています。
前回と違うのは.keyboardType(.numberPad)の部分です。このコードで数字のみのキーボードを出すことができます。

 Group {
           if kosuCheck(min: 1, max: 10) {
               Text("\(price())円です")
                   .font(.title)
           }

ここでは入力された数字が１〜１０なら（trueなら）料金を表示するという処理です。

else {
               Text("個数は１〜１０個を入れてください")
                   .foregroundColor(.red)
                   .font(.headline)
                }

一方でここでは入力された数字がfalse（１〜１０以外）ならText("個数は１〜１０個を入れてください")が赤い文字で表示してくれる処理です。

func kosuCheck(min:Int, max:Int) -> Bool {
       guard let num = Int(kosu) else {
           return false
       }
       return (num >= min && num <= max)
   }

ここではInt(kosu)でkosuを整数に変換できたならnumに代入し、できなければfalseに変換して処理を中断する処理です。

return (num >= min && num <= max)

ここではnumが範囲に入っていればtrueで表示し、入っていなければfalseをreturnで返す処理です。

func price() -> Int {
       if let num = Double(kosu) {
           let result = Int(tanka * num * tax)
           return result
       }
       else {
           return -1
       }
     }

ここは簡単にいうと料金を計算する関数です。

Doubleでkosuを変換できたらnumに代入して料金計算をして結果を返します。ここはまだ理解が浅いのでもっと説明できるように頑張ります。

ビルドすると次のような画面になっているはずです。

数字のキーボードと赤い文字が表示されています。ここに1〜10の数字を入力すると次のように計算してくれます。

2個と入れたので500円が表示されました。ここまでが今日のゴールです！

taxの所の数字を変えるとかける倍数が変わるので試してみてください。

まとめ

今日は、本を参考にしながら書いてみました。
このような内容も増やしていこうと思っています。

注意点が一つあります。
コードはなるべくコピーしない。これです。
楽だし、確実だしコピーするメリットはたくさんあるのですがやはり身につかないです。
僕も最初はやってしまっていたんですが、自分でちゃんと書くようにしてから理解が深まった気がします。気をつけましょう。

次回はアラートについてやっていこうと思います。

今までの内容は「プロフィール→マガジン→swiftUI情報発信」というところにまとめているので見返してみて下さい。

読んでいただきありがとうございます😊

読んでくださった方はぜひハートをお願いします✋