（2023/04/08 更新）
メニューボタンを表示するMenuの使い方を解説します。
環境
この記事の情報は次のバージョンで動作確認しています。
【Xcode】14.3
【iOS】16.4
【macOS】Ventura 13.2
【iOS】16.4
【macOS】Ventura 13.2
基本的な使い方
|
1 2 3 4 5 |
Menu("タイトル") { // メニューアイテム } |
タイトルが文字列の一般的なメニューの形式です。
メニューアイテムには通常Buttonビューを並べます。
使用例
|
1 2 3 4 5 6 7 8 9 10 11 |
struct ContentView: View { var body: some View { Menu("Menu") { Button("Item1", action: {}) Button("Item2", action: {}) Button("Item3", action: {}) } } } |
タイトルに文字列以外のViewを使う
タイトルに文字列以外のViewを指定する場合は次のイニシャライザを使用します。
|
1 2 3 4 5 6 7 |
Menu { // メニューアイテム } label: { // ラベルView } |
使用例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
struct ContentView: View { var body: some View { Menu { Button("Item1", action: {}) Button("Item2", action: {}) Button("Item3", action: {}) } label: { Label("Menu", systemImage: "menucard") } } } |
階層メニュー
メニューアイテムにMenuを組み込むと階層の構造のメニューが作れます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
struct ContentView: View { var body: some View { Menu("Menu") { Button("Item1", action: {}) Button("Item2", action: {}) Menu("Option") { Button("Option1", action: {}) Button("Option2", action: {}) } } } } |
プライマリーアクションの指定
primaryActionパラメータでメニューボタンをタップした時のデフォルト動作（primary action）を指定できます。
|
1 2 3 4 5 6 7 |
Menu("ラベル") { // メニューアイテム } primaryAction: { // デフォルト動作 } |
または
|
1 2 3 4 5 6 7 8 9 |
Menu { // メニューアイテム } label: { // ラベルView } primaryAction: { // デフォルト動作 } |
メニューボタンをタップした場合はデフォルト動作を実行。長押しでメニューを表示し動作を選択可能にできます。
使用例
タップするとデフォルトの英語で挨拶。長押しで英語と日本語を選択できるオプションメニューが表されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
struct ContentView: View { var body: some View { Menu { Button("English", action: helloInEnglish) Button("Japanese", action: helloInJapanese) } label: { Label("Say Hello!", systemImage: "ellipsis.bubble") } primaryAction: { helloInEnglish() } } func helloInEnglish() { print("Hello!") } func helloInJapanese() { print("こんにちは！") } } |
メニューボタンのスタイルを指定する
メニューボタンのスタイルは、次のモディファイアで指定できます。
|
1 2 3 |
.buttonStyle(定義済スタイル) |
使用可能な定義済スタイルは、こちらを参照してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
struct ContentView: View { var body: some View { Menu { Button("Item1", action: {}) Button("Item2", action: {}) Button("Item3", action: {}) } label: { Label("Menu", systemImage: "menucard") } .buttonStyle(.borderedProminent) } } |
メニューアイテムの表示順について
メニューボタンの配置によって、タップした時に開くメニューの位置が異なる場合があります。
タイトルの上にメニューが開いた場合、メニュー項目の表示順が反転しますので注意して下さい。
あわせて読みたい記事
【SwiftUI】Buttonの使い方
（2021/10/19 更新） ラベルとアクションを持つButtonの使い方を解説します。
capibara1969.com
2020.02.23
【SwiftUI】 Labelの使い方
（2021/05/09 更新） Labelはタイトルとアイコンで構成されたラベルを表示する為の専用Viewで、iOS14から使えるようになりました。
capibara1969.com
2020.11.18
