SwiftUIで行こう! 電卓を作ろ!-数式も。
続きです。下記の動画を参考にしてやります。
https://www.youtube.com/watch?v=gDEeILcSK_U
まず、整理していきます。"struct ContentView: View"の
ForEach(digits,id:\.self){rowDigits in
HStack(spacing:12){
ForEach(rowDigits,id:\.self){digit in
Button("\(digit)", action:{
self.display = String(digit)
})
.frame(width:60,height: 60)
.border(Color.red)
.font(.largeTitle)
}
}
}
の部分、ForEachの上でCommandクリックすると
と自動でstructを作ってくれます。これを別ファイルに持っていきます。新規にDigit.swiftファイルを作りさっき作ったコードを新しいファイルにコピペして保存します。
struct Digits: View {
var body: some View {
ForEach(digits,id:\.self){rowDigits in
HStack(spacing:12){
ForEach(rowDigits,id:\.self){digit in
Button("\(digit)", action:{
print("\(digit)!")
self.display = String(digit)
})
.frame(width:60,height: 60)
.border(Color.red)
.font(.largeTitle)
}
}
}
}
}
そしてContentViewは以下になります。Digits(display:$display)という表現で別ファイルにしたstruct Digits()を取り込みます。
struct ContentView: View {
@State var display = "0"
var body: some View {
VStack(spacing:10){
Text(display)
.font(.largeTitle)
.padding(.all)
.frame(maxWidth:250,alignment: .trailing)
.border(Color.red)
.padding(.leading)
.padding(.trailing)
Digits(display:$display)
}
}
}
というようにファイルを分けます。スッキリしますね。こんな感じにしたいのですが、struct Digits: View に追加していかなければいけません。
まず変数ですが、数字をいれるdigitsと表示する変数displayの変数を作ります。表示する部分の調整のための変数middleTypingも作っておきます。
let digits = [[7,8,9],
[4,5,6],
[3,2,1],
[0]]
@Binding var display:String
@State var middleTyping = false
struct Digits: Viewの全体のコードです。
struct Digits: View {
let digits = [[7,8,9],
[4,5,6],
[3,2,1],
[0]]
@Binding var display:String
@State var middleTyping = false
var body: some View {
VStack(spacing:10){
ForEach(digits,id:\.self){rowDigits in
HStack(spacing:12){
ForEach(rowDigits,id:\.self){digit in
Button("\(digit)", action:{
if self.middleTyping{
self.display = self.display + "\(digit)"
}else{
self.display = "\(digit)"
self.middleTyping = true
}
})
.frame(width:60,height: 60)
.border(Color.red)
.font(.largeTitle)
}
}
}
}
}
}
以下ボタンのコードですが変数middleTypingを利用したタイピングのコードです。
middleTyping = false
の時は
self.display = "\(digit)"
self.middleTyping = true
digitそのままの数字が表示されます。そしてmiddleTyping をtrueにして
self.display = self.display + "\(digit)"
数字が追加できるようになります。その部分のコードです。
Button("\(digit)", action:{
if self.middleTyping{
self.display = self.display + "\(digit)"
}else{
self.display = "\(digit)"
self.middleTyping = true
}
})
次に記号についてのコードです。struct UnarySymbols{}で作っていきます。
struct UnarySymbols:View {
let symbols = ["π","√","±","="]
@Binding var display:String
var body:some View{
VStack(spacing:10){
ForEach(symbols,id:\.self){mathSymbol in
Button(mathSymbol,action:{
print("press")
})
.frame(width:60,height: 60)
.border(Color.red)
.font(.largeTitle)
}
}
}
}
表示部分の記号については
let symbols = ["π","√","±","="]
としていて、あとは "ForEach"を使ってループを回します。 "VStack"を使って縦に並べていきます。
struct ContentView: Viewについては単純にすると
struct ContentView: View {
@State var display = "0"
var body: some View {
VStack(spacing:10){
Text(display)
HStack{
UnarySymbols(display:$display)
Digits(display:$display)
}
}
}
}
VStackで
Text()
HStack{}
の2つの構造。そして、HStack{}の中に
UnarySymbols(display:$display)
Digits(display:$display)
2つの構造体を配置することで、
これで数式も表示できるようになりました。
この記事が気に入ったらサポートをしてみませんか?