![見出し画像](https://assets.st-note.com/production/uploads/images/81436140/rectangle_large_type_2_7880464b80418d5b49e8562fe1cf9809.png?width=1200)
かんたん!アプリ作成。 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)
}
}
表示は
![](https://assets.st-note.com/img/1656205359320-8AZE6g08Ic.png?width=1200)
今は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)
は四角で表示される枠の角を丸くします。
表示は
![](https://assets.st-note.com/img/1656206799028-uJ30TUfR9D.png?width=1200)
となりました。
大きなレイアウトをHStackで小さなレイアウトをモディファイアで行います。
この記事が気に入ったらサポートをしてみませんか?