PreviewでもSimulatorと同じようにactionの挙動を反映させて確認がある程度できるようです。ただのレイアウトようのCanvasではありませんね
Xcode 11.1
Button
SwiftUIのButtonはUIButtonに比べて柔軟に作られています。最初からボタン枠があるわけではなく、文字だったり画像だったりと
ボタンの設定
基本的な設定には以下の2つが必要です。
- タップされたときのaction
- タップされるボタン本体がどのようなものか
コードでは、
1 2 3 4 5 |
Button(action: { // action }){ // タップされるボタン } |
具体的にはContentViewのbodyに書いていきます。
ボタンをタップすると「Tapped Button」とprintするコードはこのようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import SwiftUI struct ContentView: View { var body: some View { Button(action: { print("Button Tapped") }){ Text("Button") } } } |
Buttonという文字がボタン本体になりますのでこれをタップするとactionが起きる設定です。
Previewでこれを確認してみましょう。
Previewでボタンactionの確認
Previewでボタンの挙動を確認するために、右下にある三角アイコンの「Play」ボタンをControl+クリック
「Debug Preview」を選択
「Debug Area」が下に現れます。
PreviewでButton文字をクリックするとButton Tappedが表示されます。
もちろん、Simulatorを起動させても同じように確認することはできます。
actionでTextを変更する
Button actionでTextの文字を変えることをUIKitでやりましたが、これをSwiftUIで同様に作ってみます。
ボタンタップでに文字を変える流れです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import SwiftUI struct ContentView: View { // @Stateを使ってUIの状態と同期をとる @State var labelText = "Hello World" @State var flag = false var body: some View { // 縦並にViewを並べるレイアウト VStack { Text(labelText) .font(.largeTitle) .padding(.bottom) Button(action: { if(self.flag){ self.labelText = "SwiftUI Test" self.flag = false } else{ self.labelText = "tapped !" self.flag = true } }){ Text("Button") .font(.largeTitle) .foregroundColor(Color.white) } .padding(.all) .background(Color.blue) } } } |
三角アイコンの「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