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)
}
}
}
}
こんな感じで計算ができるようになりました。
この記事が気に入ったらサポートをしてみませんか?