【SwiftUI】簡単なコードでButtonを実装しよう！

2023年8月31日

SwiftUIでボタンを押したときのアクションを記述すると以下のようなコードになると思います。

import SwiftUI

struct ContentView: View {
    
    var body: some View {        
        Button("ボタン名"){
            //ボタンを押したときの処理
        })
        {
            Text("ボタン名")
        }
    }
}

しかし上記のような例ではカッコが多くて見づらいです。

ということで今回はSwiftUIを使って簡単なコードでボタンを実装する方法を紹介します。

ボタンを簡単なコードで実装する

冒頭で挙げたものと処理は以下のようなコードで実装することができます。

import SwiftUI

struct ContentView: View {
    
    var body: some View {   
        Button("ボタン名"){
            //ボタンを押したときの処理
        }
    }
}

どうでしょう、こちらの方がスッキリしていて見やすいのではないでしょうか。

一応この記述方法を使ってランダムな変数を表示するボタンを実装したサンプルコードを載せておきます。

import SwiftUI

struct ContentView: View {
    @State var rand_num:Int = 0
    
    var body: some View {
        VStack{
            Button("乱数を生成"){
                rand_num = Int.random(in:0 ..< 100)
            }
            .font(.largeTitle)
            .frame(width: 280, height: 60, alignment: .center)
            .foregroundColor(Color.white)
            .background(Color.green)
            .cornerRadius(15, antialiased: true)
            
            Text("\(rand_num)")
                .font(.largeTitle)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}