![見出し画像](https://assets.st-note.com/production/uploads/images/81426564/rectangle_large_type_2_08e6d893917701b48c92d14eb5124ac7.png?width=1200)
かんたん!アプリ作成。 Swift! - 3
@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)")
}
}
をもとにアレンジしていきます。
数字を指定してボタンを押すと数字を2倍するアプリとなっていますが、数字が入っていない時にボタンを押すと止まってしまいます。
total = Int(self.textNum)! * 2
あとは
Int(self.textNum)!
"!"をつけてアンラップという操作をしています。これを別の方法でエラーとならないようにします。"guard let"を使います。
guard let num = Int(textNum) else{
return
}
total = num * 2
let num = Int(textNum)
で入力がない場合は"return"します。"return"というのは何もしないということです。"num"に代入された場合のみ
total = num * 2
されるようになりました。これで何も入力してない時にボタンを押してもエラーとはならないよになりました。
最初の画面、入力画面が空欄、計算結果が"0"にできるボタンを作ります。
Button(action: {
textNum = ""
total = 0
}){
Text("Reset")
.buttonStyle(.borderedProminent)
.padding()
.font(.title)
}
を追加します。
textNum = ""
total = 0
としてボタンを押すと初期化します。
![](https://assets.st-note.com/img/1656193374695-cTCxYSygNK.png?width=1200)
これで最低限のエラー回避と機能の実装ができたと思います。
機能はそこそこにしておいてレイアウトです。
基本的にモディファイアをつけていきます。
TextField("数字を入力", text: $textNum)
.font(.title)
TextField("数字を入力", text: $textNum) .font(.title) ・・・ これでもOK
".font(.title)"のように"."ドットから始まるコードで細かい設定ができるようになっています。行を変えて書いていますが、続けて書くこともできます。
".font(.title)"の場合は文字を少し大きくするいう命令です。他にもいろいろあるので試してみると面白いです。ドットを入れると補完の候補が出てくるので試したいものを選択すると適応、実行されます。
![](https://assets.st-note.com/img/1656204744307-0fk7eoE2rl.png?width=1200)
この記事が気に入ったらサポートをしてみませんか?