【SwiftUI】contextMenuで長押ししたときにメニューを出す

先日リリースしたアプリに使用した技術をひとつずつ解説しています。
私のアプリはこちら。

contextMenuとは

任意のビューに対し、長押ししたときにメニューを出す機能を追加するメソッド。

実際の動作

実際にアプリを触らないとわかりづらいかもしれませんが、長押しすることでメニューが表示されています。また、メニューの外側をタップするとメニューが閉じるようになっています。
iOSアプリでよく見かける機能ではないでしょうか。

ソースコード

ContentView.Swift

import SwiftUI

struct ContentView: View {
    let evs = ["イーブイ", "ブースター", "シャワーズ", "サンダース", "エーフィ", "ブラッキー", "グレイシア", "リーフィア", "ニンフィア"]
    let colors1: [Color] = [Color(#colorLiteral(red: 0.7254902124, green: 0.4784313738, blue: 0.09803921729, alpha: 1)), .red, .blue, .yellow, Color(#colorLiteral(red: 0.8446564078, green: 0.5145705342, blue: 1, alpha: 0.5)), .black, Color(#colorLiteral(red: 0.6872052062, green: 0.9808971643, blue: 1, alpha: 1)), Color(#colorLiteral(red: 0.5843137503, green: 0.8235294223, blue: 0.4196078479, alpha: 1)), .pink]
    let colors2: [Color] = [.white, .white, .white, .black, .black, .yellow, .blue, Color(#colorLiteral(red: 0.9764705896, green: 0.850980401, blue: 0.5490196347, alpha: 1)), Color(#colorLiteral(red: 0.4745098054, green: 0.8392156959, blue: 0.9764705896, alpha: 1))]

    @State var evID = 0

    var body: some View {
        ZStack{
            Circle()
                .foregroundColor(colors1[evID])
                .frame(width: 250)
            VStack{
                Image(systemName: "sparkles") //このビューを長押しするとメニューが現れるようにする
                    //ここからがコンテキストメニュー
                    .contextMenu(menuItems: {
                        ForEach(0..<9) { n in
                            Button(action: {
                                evID = n
                            }, label: {
                                Text(evs[n])
                            })
                        }
                    })
                    //ここまでがコンテキストメニュー
                Text(evs[evID])
                    .padding()
            }
            .font(.title)
            .foregroundColor(colors2[evID])
        }
    }
}

「長押しするとメニューが出る」という機能を追加したいビューに対して.contextMenuを書きます。
そして、contextMenuの引数であるmenuItemsの{}内が、表示されるメニューの内容になります。

menuItemsには何を書く？

contextMenuでTextやSF Symbolsを使ったImageを表示させることができます。しかし、書いたものを自動的にボタンにする、という機能はありません。上のサンプルアプリのようにcontextMenuにボタンを表示させたい場合は、menuItemsにはButtonビューを書くのが良いでしょう。

まとめ

簡単なコードでおもしろくて便利な機能を実現できます。ぜひ、SwiftUIでcontextMenuを使ってみてください。

よかったらTwitterのフォローをお願いします。
https://twitter.com/masayoshi_tozan