SwiftUIで行こう！ 電卓を作ろ！-数字を表示。

In A Nutshellさんの以下動画を参考に電卓を作っていきます。
https://www.youtube.com/watch?v=JGlWrqMbizI

まず単純に水平方向(HStack)にButton()を使って数字を表示します。まず、水平に"9"と"7"を表示させます。

import SwiftUI
struct ContentView: View {
   var body: some View {
       
       HStack(spacing:10){
           Button("9", action:{
           print("press!")
           
           })
           .frame(width:50,height: 50)
           .border(Color.red)
           
           Button("7", action:{
                   
　　　　　　　　　　　 print("press!")
                      
                 })
                  .frame(width:50,height: 50)
                  .border(Color.red)
       }
   }
}

次に"ForEach"で、数字は変数で指定します。

let digits = [7,8,9]

コードはHStack{}で

   let digits = [7,8,9]

   var body: some View {
       HStack(spacing:10){

           ForEach(digits,id:\.self){digit in
           
           Button("\(digit)", action:{
                      print("\(digit)!")               
                      })
                      .frame(width:50,height: 50)
                      .border(Color.red)       
           }        
       }       
   }

次に縦に並べます。もう一つ"ForEach"を重ねます。"VStack"を使います。

まず変数"digits"

let digits = [[7,8,9],
              [4,5,6],
              [3,2,1]]

として、1つ目の"ForEach"は

1番目　 [7,8,9],
2番目　 [4,5,6],
3番目　 [3,2,1]

と繰り返します。もう1つの"ForEach"でその中身を繰り返します。例えば、1つ目の"ForEach"で [7,8,9]が選ばれますると、その次、配列の中入って"7"、"8"、"9"と選ばれます。この繰り返しを3回(1回目,2回目,3回目)繰り返します。

 VStack(spacing:10){
           ForEach(digits,id:\.self){rowDigits in
               HStack(spacing:10){
                          ForEach(rowDigits,id:\.self){digit in
                          
                          Button("\(digit)", action:{
                                     print("\(digit)!")
                                     
                                     })
                                     .frame(width:60,height: 60)
                                     .border(Color.red)
 　　　　　　　　　　　　　　　　　　　　　　 .font(.largeTitle)
                          }
               }
            }
           
   }

これで、シュミレータで実行し、数字を押すとコンソールに

"数字"と"！"例えば"7"を押すと"7!"と出力されました。

次に、数字を表示させる部分を作ります。

VStack{
  Text("0")

  forEach{}
}

な感じに

Text("0")

を挿入します。そして細かな設定です。

    Text("0")
      .font(.largeTitle)
      .padding(.all)
      .frame(maxWidth:250,alignment: .trailing)
      .border(Color.red)
      .padding(.leading)
      .padding(.trailing)

実行すると、

番号のボタンを押すたびに表示部分に数字を表示させたいのでまず変数を宣言します。Text()にも変数を入れます。

@State var display = "0"

Text(display)

そしてボタンの処理です。

self.display = String(digit)

これで実行し、ボタンを押すと、押した番号が入力されます。特別な機能はありません。単純なものとなっています。

全体のコードです。

struct ContentView: View {
   
   let digits = [[7,8,9],
                [4,5,6],
                [3,2,1],
                [0]]
   
   @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)
           
           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)
                    
                          }
               }
           }       
        }
   }
     
}