[Xcode/SwiftUI] ControlGroupを使ってみる

関連するコントロールをまとめてグループ化して、コンパクトに整理されたUIが作れるとのこと

実装

import SwiftUI

struct HomeView: View {
    var body: some View {
        Menu {
            ControlGroup {
                Button {
                    // Back
                } label: {
                    Image(systemName: "backward.end.fill")
                }
                Button {
                    // Play
                } label: {
                    Image(systemName: "play.fill")
                }
                Button {
                    // Forward
                } label: {
                    Image(systemName: "forward.end.fill")
                }
            }
            Button {
                // お気に入り
            } label: {
                Label("Favorites", systemImage: "heart")
            }
            Button {
                // ライブラリ
            } label: {
                Label("My Library", systemImage: "line.3.horizontal")
            }
            Button {
                // エディット
            } label: {
                Label("Edit", systemImage: "gear")
            }
        } label: {
            Image(systemName: "ellipsis.circle")
        }
        .menuOrder(.fixed)
    }
}

視覚的に整理
ControlGroup 内のボタンは一つのまとまりとして表示され、ユーザーがその関連性を直感的に理解できる。

カスタマイズ
必要に応じてアイコンやアクションを自由に設定できる。

.menuOrder(.fixed)

メニュー内のボタン順序を固定化するオプション。