【SwiftUI】ボタンの配置 – アプリ開発

今回はButtonの配置方法と使い方について説明します。

Buttonには、

ボタンをタップした時の処理内容を記述する箇所

Buttonの表示について記述する箇所

があります。

それぞれの記述の仕方をしっかりと覚えておきましょう。

1. 環境
2. ボタンの定義の仕方
3. ボタンの配置を行う
4. 処理内容について-ボタンをタップしてテキストの値を変更する
5. まとめ

1. 環境

今回紹介する内容で動作確認したXcodeとSwiftのVersionは以下になります。

【Xcode】 12.3
【Swift】5.3.2

2. ボタンの定義の仕方

Buttonの引数には”action”と”label”を用意します。

actionには、ボタンをタップした際の処理内容を記述し

labelには、ボタンに表示される内容を記述します。

Button(action: {"処理の為のコード"}, label: {
            "表示内容"
　　　 })

“表示内容”を外に出して、次のように記述することもできます。

Button(action: {"処理の為のコード"}){
            "表示内容"
　　　 }

3. ボタンの配置を行う

実際にコードを書いて、ボタンの配置を行うと次のようになります。

2通りの配置方法を紹介します。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack{
            Button(action: {}, label: {
                Text("Button")
            })
            Button(action: {}){
                Text("Button")
            }
        }
    }
}

プレビューモードで確認すると次のようになります。

VStackの中にボタンを二つ配置さているので、縦に並んで配置されています。

“action”には何も記述していないので、このままだとボタンを押しても何も処理は行われません。

4. 処理内容について-ボタンをタップしてテキストの値を変更する

ボタンを押した時の処理内容を記述した時の例を挙げます。

1. コード例

コード例を示します。

import SwiftUI

struct ContentView: View {
    @State var text:String = "Button is not tapped"
 
    var body: some View {
        VStack{
            Text(self.text)
            Button(action: {
                self.text = "Button is tapped"
            }, label: {
                Text("Button")
            })
        }
    }
}