SwiftUIで行こう！-計算しましょ。

参考にしたサイトです。

早速作っていきましょう！

Xcodeを立ち上げて、新規プロジェクトを作ります。その時にSwiftUIになるように設定します。そうすると

ContentView.swift

が出来ていて、ここに主にコードを書いていきます。

struct ContentView: View {
   var body: some View {
         
       Text("Hellow!")

   }
}

基本的な構造がそこにはあります。ContentViewはViewを書いて、中身は別ファイルに書いていきます。今回は

Calculator.swift

というファイルを作ってここに計算式などを入れてきます。そしてViewであるContentViewに渡していきます。

import SwiftUI
struct ContentView: View {
   var body: some View {
       
       VStack{
           Text("Hellow!")
                .font(.system(size: 30))
          
            Calculator()
   
       }

   }
}

テキストと一緒に表示させたいのでVStackを使います。

それでは実際に計算するコードを書いていきます。

まず必要なものを考えます。

価格、税、合計

が必要ですね。変数を作ります。

 var price = ""
var tax = ""
var totalSum = 0

今回は入力は

TextField

を使うためprice,taxは文字列で入力することになります。

レイアウトですが形がまとめやすい

Form{
}

を使います。

TextField("価格",text:self.$price).keyboardType(.numberPad)

プレースホルダーには "価格"と入り、入力した文字は$priseとすることで変数priceに入ります。

.keyboardType(.numberPad)

は数字を入れるため命令です。

TextField("税",text:self.$tax).keyboardType(.numberPad)

"税"についても同じです。ここまでのコードです。

import SwiftUI

struct Calculator: View {
   
  @State var price = ""
  @State var tax = ""
  
   var body: some View {
       
       Form{
           Section(header: Text("Calc").font(.title)){
               TextField("価格",text:self.$price).keyboardType(.numberPad)
               TextField("税",text:self.$tax).keyboardType(.numberPad)
  
           }
       }         
       
   }
}

ちょっと変数も特殊で

@State

を前に付けて使います。

次にボタンを押したら計算するようにコードを書いていきます。

 Button(action: {
              //  ここに計算するコードを書きます。   
               })

命令を書き込んでみます。

 Button(action: {
                   self.totalSum = Double(self.price)! + Double(self.price)! * Double(self.tax)! / 100.0
                   self.finalSum = Int(self.totalSum)
               }){
                   Text("calc!").font(.title)
               }

これでボタンを押したら変数finalSumに入れます。

Text("calc!").font(.title)

これでボタンの名前を表示させます。

最後に

Text("Sum: \(finalSum)").font(.title)

で計算して出した答えを表示させます。

全てのコードです。

import SwiftUI

struct Calculator: View {
   
  @State var price = ""
  @State var tax = ""
  @Stat var totalSum = 0
  @Stat var finalSum = 0
  
   var body: some View {
       
       Form{
           Section(header: Text("Calc").font(.title)){
               TextField("価格",text:self.$price).keyboardType(.default)
               Spacer()
               TextField("税",text:self.$tax).keyboardType(.numberPad)
                      
                 Button(action: {
                   self.totalSum = Double(self.price)! + Double(self.price)! * Double(self.tax)! / 100.0
                   self.finalSum = Int(self.totalSum)
                   
               }){
                   Text("calc!").font(.title)
               }
       
               Text("Sum: \(finalSum)").font(.title)
               
           }
       }         
       
   }
}

こんな感じで計算ができるようになりました。