🪶

SwiftUIでテキストやImage(アイコン)をボタンにする

2024/07/12に公開

Tips💡

SwiftUIで、Textや Imageをタップしたときに、ボタンのように使う方法がないか調べていたらあった!

class modifierのonTapGestureを使うと実現できるようだ。
https://developer.apple.com/documentation/swiftui/view/ontapgesture(count:perform:)

using

オブジェクトに対して、class modifierをつけるだけ。同じ宣言的UIフレームワークのFlutterで表現するなら、GestureDetectorがある。

https://api.flutter.dev/flutter/widgets/GestureDetector-class.html

[example]

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            // ここから追加
                .onTapGesture {
                    // この中に処理を書く
                    print("hi icchy")
                }
            
            Text("Hello, world!")
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

ImageをTapすると、ログが表示されました🙌

感想

カスタマイズしたアイコンボタンを作って処理を書いてみたのですが、なぜか反応しなかった???
ボタンがなくても押すイベントが起きて、処理が実行されればやりたいことはできるので、onTapGestureを使うことで、短いコードで簡単に処理を実行できる方法を実現できました。

Discussion