2023/7/24

【Swift UI】Menuの使い方！クリックでリスト表示するビュー

この記事からわかること

Swift UIのMenu構造体の使い方
長押しでメニューを表示する方法
階層構造でメニューを表示する方法

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

公式リファレンス：Menu構造体

Menu構造体

Swift UiのMenu構造体は文字を長押しした際に任意のビューメニューを表示できる構造体です。中にはTextだけでなく、Buttonなどを配置できるためそこから任意の処理を実行することも可能です。

Menu("Menu") {
    Text("Text1")
    Button { } label: { Text("Button1") }
    Button { } label: { Text("Button2") }
}

またMenu(content: () -> Content, label: () -> Label)形式でアイコンと文字を並べることも可能です。

Menu {
    
} label: {
    Label("iPhone", systemImage: "iphone")

    // or 
    
    Image(systemName: "iphone")
    Text("iPhone")
}

階層構造のメニュー

また入れ子にすることで階層構造になったメニューを実装することも可能です。

Menu("Actions") {
    Button("追加", action: {})
    Button("名前を変更", action: {})
    Button("削除", action: {})
    Menu("コピー") {
        Button("コピー", action: {})
        Button("パスをコピー", action: {})
    }
}

長押し時にメニューを表示する

primaryActionに処理を渡すことでクリック時はprimaryActionを長押し時にメニューを表示させることが可能です。

Menu {
    Button("Button1", action: { print("Button1") })
    Button("Button2", action: { print("Button2") })
    Button("Button3", action: { print("Button3") })
} label: {
    Label("クリック or 長押ししてね", systemImage: "book")
} primaryAction: {
    print("長押し")
}

Menu構造体ではなくText構造体などからメニューを呼び出す

contextMenuモディファイアを使用することでMenu構造体ではなくText構造体などからメニューを呼び出すことが可能です。

Text("UserName")
.padding()
.contextMenu {
    Button {
        
    } label: {
        Label("BOOK", systemImage: "book")
    }
    Button {
        
    } label: {
        Label("iPhone", systemImage: "iphone")
    }
}