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

大きなレイアウトを少しいじってみます。

import SwiftUI

struct ContentView: View {   
    @State var textNum = ""
    @State var total = 0    
    var body: some View {
        VStack{
            TextField("数字を入力", text: $textNum).font(.title)   
            Button(action: {
                guard let num = Int(textNum) else{
                    return
                }                                    
                total = num * 2             
            }){
                Text("Push!")
                    .buttonStyle(.borderedProminent)
                    .padding()
                    .font(.title)
            }
            .buttonStyle(.borderedProminent)
            Button(action: {
                textNum = ""
                total = 0
            }){
                Text("Reset")
                    .buttonStyle(.borderedProminent)
                    .padding()
                    .font(.title)
            }
            Text("\(total)")
                .font(.title)
        }
        .buttonStyle(.bordered)
    } 
}

表示は

今はVStackで縦に並べています。
ボタンを横並びにして、"0"だけではわかりにくいので"合計"と書きます。そして"0"の背景色も変えてみます。

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

        VStack{

            TextField("数字を入力", text: $textNum).font(.title)
            
            HStack{
                Button(action: {
                    guard let num = Int(textNum) else{
                        return
                    }
                    
                    total = num * 2
                    
                }){
                    Text("Push!")
                        .buttonStyle(.borderedProminent)
                        .padding()
                        .font(.title)
                    
                }
                .buttonStyle(.borderedProminent)
                            
                Button(action: {
                    textNum = ""
                    total = 0
                    
                }){
                    Text("Reset")
                        .buttonStyle(.borderedProminent)
                        .padding()
                        .font(.title)
                }
                .buttonStyle(.bordered)
                
            }
            .padding(50)
            
            Text("Result")
                .font(.title)
                
            Text("\(total)")
                .frame(width:100)
                .font(.title)
                .padding()
                .background(.blue.opacity(0.3))
                .cornerRadius(10)       
            }
    }
    
}

HStack{}

で横ならび、合計とい文字追加。

Text("Result")
　　.font(.title)

Resultとし合計の数字が出る場所をカスタム。

  Text("\(total)")
                .frame(width:100)
                .font(.title)
                .padding()
                .background(.blue.opacity(0.3))
                .cornerRadius(10) 

.frame(width:100)

は表示部分の幅を指定。

.font(.title)

は文字の大きさ

.padding()

余白部分の指定

.background(.blue.opacity(0.3))

は背景色が"blue"で透明度(.opacity)が0.3と指定。

.cornerRadius(10)

は四角で表示される枠の角を丸くします。

表示は

となりました。

大きなレイアウトをHStackで小さなレイアウトをモディファイアで行います。