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つの構造体を配置することで、

これで数式も表示できるようになりました。