Swiftでアプリ。- SwiftUIでBMI!

簡単に文字と画像が表示されるものができます。ここからいろんなアプリを作ることができます。

JavaScriptで作ってみましたがこれをSwiftUIで作ってみましょう。

まず部品をざっと並べてみます。VStackを使って縦に並べます。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("BMIを計算しよう！")
            Text("身長と体重を入力して「calcボタン」を押すと計算します。")
            Text("身長")
            Text("体重")
            Button(action: {print("push")}) {
                Label("Calc", systemImage: "circle.square.fill")
            }
            
            Text("あなたのBMIは・・・です。")
        }
    }
}

これで表示部分はできましたが、入力部分がありません。入力は

struct TextField<Label> where Label : View

  TextField(
        "プレースフォルダ",
        text: $変数
    )

という書き方になります。今回設置するものは、

TextField("身長を入れてください",text:$heightValue)

としました。
何を入れるかわかりやすいように"身長を入れてください"と薄く表示(プレースフォルダ)し、入力したものを使えるように変数に入れる仕組みとなっています。

特殊なのが"$変数"の部分、これを使うには変数を用意しないといけません。

@State private var value: String = ""

ここで大事なのが"@State "です。これを使うことでリアルタイムに変化する値に対して受け取って更新する機能を付加します。常に変数が変化しているということなので取り出すと、いつでも最新状態に更新されます。

import SwiftUI

struct ContentView: View {
    
    @State var heightValue:String = ""
    @State var weightValue:String = ""
    
    var body: some View {
        VStack {
            Text("BMIを計算しよう！")
            Text("身長と体重を入力して「calcボタン」を押すと計算します。")
            Text("身長")
            TextField("身長を入れてください",text:$heightValue)
            Text("体重")
            TextField("身長を入れてください",text:$weightValue)
            Button(action: {print("push")}) {
                Label("Calc", systemImage: "circle.square.fill")
            }
            
            Text("あなたのBMIは・・・です。")
        }
    }
}

今はボタンを押せば"push"と出力されます。この部分でBMIの計算できるようにします。

計算の実装です。

計算式は。

計算結果 =体重(kg) / (身長(m)/ (身長(m)) 

となります。・・・　体重を(身長(m)x身長(m))で割るのと同様の計算式。

コードにします。まず結果を入れる変数。

@State var bmiValue:Double = 0

計算式ですが、入力するのは文字の扱いなので計算できる数字に変換します。gurd letを使ってエラーを回避しています。

guard let height = Double(self.heightValue),
      let weight = Double(self.weightValue) 
else {
      print("Fail to Calc BMI")
            return
}

数字に変換された変数を使って計算したものを変数bmiValueに代入します。

 bmiValue = weight / (height/100) / (height/100)

そして最終的に

 Text("あなたのBMIは\(Int(bmiValue))です。")

で計算結果を表示させています。

ボタン全体は

Button(action: {
                guard let height = Double(self.heightValue),
                      let weight = Double(self.weightValue) else {
                    print("Fail to Calc BMI")
                    return

                bmiValue = weight / (height/100) / (height/100)
                
            }) {
                Label("Calc", systemImage: "circle.square.fill")
            }

入力欄も含めて全体です。

struct ContentView: View {
    
    @State var heightValue:String = ""
    @State var weightValue:String = ""
    @State var bmiValue:Double = 0
    
    
    var body: some View {
        VStack {
            Text("BMIを計算しよう！")
            Text("身長と体重を入力して「calcボタン」を押すと計算します。")
            Text("身長")
            TextField("身長を入れてください",text:$heightValue)
            Text("体重")
            TextField("身長を入れてください",text:$weightValue)
            Button(action: {
                guard let height = Double(self.heightValue),
                      let weight = Double(self.weightValue) else {
                    print("Fail to Calc BMI")
                    return
                }
                
                bmiValue = weight / (height/100) / (height/100)     
                
            }) {
                Label("Calc", systemImage: "circle.square.fill")
            }
            Text("あなたのBMIは\(Int(bmiValue))です。")
        }
    }
}

表示すると

これで身長、体重を入れてCalcボタンを押せばBMIの数字が出るようになりました。