[SwiftUI] Button を簡単に作成する

PreviewでもSimulatorと同じようにactionの挙動を反映させて確認がある程度できるようです。ただのレイアウトようのCanvasではありませんね

Swift 5.1
Xcode 11.1

 

Button

 
SwiftUIのButtonはUIButtonに比べて柔軟に作られています。最初からボタン枠があるわけではなく、文字だったり画像だったりと
 

 

ボタンの設定

 
基本的な設定には以下の2つが必要です。

  1. タップされたときのaction
  2. タップされるボタン本体がどのようなものか

コードでは、
 

 
具体的にはContentViewのbodyに書いていきます。
ボタンをタップすると「Tapped Button」とprintするコードはこのようになります。
 

Buttonという文字がボタン本体になりますのでこれをタップするとactionが起きる設定です。
Previewでこれを確認してみましょう。

 

Previewでボタンactionの確認

 
Previewでボタンの挙動を確認するために、右下にある三角アイコンの「Play」ボタンをControl+クリック
「Debug Preview」を選択

「Debug Area」が下に現れます。
PreviewでButton文字をクリックするとButton Tappedが表示されます。

もちろん、Simulatorを起動させても同じように確認することはできます。

 

actionでTextを変更する

 
Button actionでTextの文字を変えることをUIKitでやりましたが、これをSwiftUIで同様に作ってみます。

iOSアプリを始めるにあったて、まず簡単な例としてボタンをタップするとラベルの文字が変わるアプリを作ってみたいと思います。アプリ作成の基...

ボタンタップでに文字を変える流れです。
 

 
三角アイコンの「Play」ボタンを押すとactionが反映されるようになります。
 

 
ボタンをタップするとTextが Tapped ! に変わりました。
 

 

@State:
@Stateを宣言してメモリの管理をSwiftUIフレームワークに反映させて値を更新することができるようになります。

VStack:
ViewのレイアウトでVerticalつまり垂直に並べる時に使います。水平方向はHStackです。

Modifiers:
InspectorあるいはPreviewから文字のフォント、色、背景、paddingなどを変更できます。

References:
Button – SwiftUI | Apple Developer Documentation
VStack – SwiftUI | Apple Developer Documentation
State – SwiftUI | Apple Developer Documentation