かんたん！アプリ作成。 Swift! - 2

目標としては画面上で数字を入力してボタンを押すと計算できるものを作ります。

まずその準備として、入力した文字を別の作業で使えるようにする仕組みを作っていきます。

import SwiftUI

struct ContentView: View {
    
    var greet = "Hello!"
 
    var body: some View { 

        Text(greet)
            .font(.largeTitle)
    }
}

var greet = "Hello!"

変数宣言して、

Text(greet)

としてText()に反映させます。

"Hello"と表示できました。変数宣言してそれを使い回し、コードを書いていく基本となります。

SwiftUIで入力したデータを利用したい場合は

TextField("入力欄に事前に表示させたい文字列", text: 変数)

例えば、

TextField("入力します", text: greet)

とします。ただし、この"TextField()'を使う場合のルールとして変数宣言時に

"@State"を前につけて

@State var greet = "Hello!"

"$"をつけて

TextField("入力します", text: $greet)

とする必要があります。

struct ContentView: View {
    
    @State var greet = "Hello!"
    
    var body: some View {
        
        TextField("入力します", text: $greet)
        
        Text(greet)
            .font(.largeTitle)
        
    }
}

TextField()を使うことで入力された文字列を変数に入れて使い回すことができるようになります。このコードの場合、入力した文字がText()で表示される文字に続けて表示されるようになります。
".font(.largeTitle)"は文字を大きくするためにつけています。モディファイアと言われるものです。

入力した文字が変数に反映されていることがわかります。

入力した文字列を利用して計算します。

   @State var textNum = ""
   @State var total = 0
    
    var body: some View {

        VStack{
            TextField("数字を入力", text: $textNum)
                .font(.title)

            Button(action: {
                total = Int(self.textNum)! * 2
            }){
                Text("Push!")
                    .buttonStyle(.borderedProminent)
                    .padding()
            }
            Text("\(total)")
        } 
    }

これで実行すると

数字を入力と書いてあるところに数字を入れます。そして　"Push"を押すと計算できるようになりました。　

TextField("数字を入力", text: $textNum)

で数字を受け入れて、

Button(action: {　・・・

でボタンを押すと、

  total = Int(self.textNum)! * 2

Int(self.textNum)!

文字を数字に変換して、"2"をかけます。その答えを

Text("\(total)")

で画面上に2倍になった数字を表示します。