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

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

Swift 5.1
Xcode 11.3.1

Button

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

目次
1. ボタンの設定
2. Previewでボタンactionの確認
3. actionでTextを変更する

ボタンの設定

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

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

コードでは、
　

Button(action: {
    // action
}){
    // タップされるボタン
}

Button(action: {

// action

}){

// タップされるボタン

}

　
具体的にはPreView上でButtonを選んで配置するか

ContentViewのbodyに直に記述することもできます。
ボタンをタップすると「Tapped Button」とprintするコードはこのようになります。
　

import SwiftUI

struct ContentView: View {

    var body: some View {
        
        Button(action: {
            print("Button Tapped")
        }){
            Text("Button")
        }
    }
}

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で同様に作ってみます。

[iPhone] ボタンをXcodeで設定する (Swift)

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

2015-12-26 09:31

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

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()
    }
}

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値の反転をさせることもできます。

//self.flag = false
self.flag.toggle()
...
//self.flag = true
self.flag.toggle()

//self.flag = false

self.flag.toggle()

...

//self.flag = true

self.flag.toggle()

三角アイコンの「Play」ボタンを押すとactionが反映されるようになります。
ボタンをタップするとTextが Tapped ! に変わりました。

@State：
Property Wrapper の１つで@Stateを宣言してメモリの管理をSwiftUIフレームワークに反映させて値を更新することができるようにする

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

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

ボタンを角丸枠にするのも簡単です。Buttonに.overlayの設定

.overlay(
                RoundedRectangle(cornerRadius: 10)
                    .stroke(Color.blue, lineWidth: 1)
)

.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