SwiftUIで行こう! 電卓を作ろ!-基本。
電卓を作る場合を考えてみます。基本的な機能についてなるべく単純にしてみます。
演算としては足し算、引き算ができるようにします。実際に作り場合はボタンを使って数字、演算子を入れて計算させます。
流れとしては、
数字1 → 演算子("+" or "-") → 数字2 → 演算子(=) → 答え!
というふうになります。今回は数字は固定します。
数字1(first)が"9"、 数字2(second)が"5"を入れるようにしています。
演算子("+" or "-")は自分で自由に変更していきます。(少し手間ですが。)
self.operand = "+" または "-"
そして数字2(second)を入れて、最後に"="を入れて計算開始です。
操作画面は簡単に以下のように組んであります。
オレンジ四角の中に数字と演算子が入っていきます。
ACで数字などリセットします。
コードですが、ContentView()のなかに必要な変数を作っていきます。
この時、変数の値が変えられるように@Stateをつけて宣言しています。
@State var display = 0
@State var first = 0
@State var second = 0
@State var operand = "+"
レイアウトは単純で
VStack{}で縦に並べることができるようになるので基本形は
Text()
Buttin(){}
全体は
import SwiftUI
struct ContentView: View {
@State var display = 0
@State var first = 0
@State var second = 0
@State var operand = "+"
var body: some View {
VStack{
Text(String(display))
.padding()
Button("数字ボタン1"){
self.first = 9
self.display = self.first
}.padding()
Button("演算子[+]ボタン"){
self.operand = "+"
}.padding()
Button("数字ボタン2"){
self.second = 5
self.display = self.second
}.padding()
Button("演算子[=]ボタン"){
switch self.operand{
case "+":
self.display = self.first + self.second
case "-":
self.display = self.first - self.second
default:
print("演算子なし!")
}
}.padding()
Button("AC"){
self.display = 0
}.padding()
}
}
}
演算子"="の時にはoperandをswichで"+"又は"-"を選択し"case"ごとに計算して変数"display"に入れ、Text()で表示させます。
Button("演算子[=]ボタン"){
switch self.operand{
case "+":
self.display = self.first + self.second
case "-":
self.display = self.first - self.second
default:
print("演算子なし!")
}
そして"AC"ボタンでリセットします。
Button("AC"){
self.display = 0
}
これは決まった数字の足し算と引き算ができるだけの電卓というか計算機でした。
単純ですが、基本的には数字、演算子などをボタンを押すとにより取得して計算させる方式、電卓みたいな操作感にすることを目指しています。
この記事が気に入ったらサポートをしてみませんか?