PreviewでもSimulatorと同じようにactionの挙動を反映させて確認がある程度できるようです。ただのレイアウトようのCanvasではありませんね
Xcode 11.3.1
Button
SwiftUIのButtonはUIButtonに比べて柔軟に作られています。最初からボタン枠があるわけではなく、文字だったり画像だったりと
ボタンの設定
基本的な設定には以下の2つが必要です。
- タップされたときのaction
- タップされるボタン本体がどのようなものか
コードでは、
1 2 3 4 5 |
Button(action: { // action }){ // タップされるボタン } |
具体的にはPreView上でButtonを選んで配置するか
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 36 37 38 39 40 |
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) } } } struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } } |
SwiftUIではToggleを使ってBool値の反転をさせることもできます。
1 2 3 4 5 |
//self.flag = false self.flag.toggle() ... //self.flag = true self.flag.toggle() |
三角アイコンの「Play」ボタンを押すとactionが反映されるようになります。
ボタンをタップするとTextが Tapped ! に変わりました。
@State:
Property Wrapper の1つで@Stateを宣言してメモリの管理をSwiftUIフレームワークに反映させて値を更新することができるようにする
VStack:
ViewのレイアウトでVerticalつまり垂直に並べる時に使います。水平方向はHStackです。
Modifiers:
InspectorあるいはPreviewから文字のフォント、色、背景、paddingなどを変更できます。
ボタンを角丸枠にするのも簡単です。Buttonに.overlayの設定
1 2 3 4 |
.overlay( RoundedRectangle(cornerRadius: 10) .stroke(Color.blue, lineWidth: 1) ) |
Modifierではこのように見えます。
角丸ボタンになりました。
References:
Button – SwiftUI | Apple Developer Documentation
VStack – SwiftUI | Apple Developer Documentation
State – SwiftUI | Apple Developer Documentation