【SwiftUI】メニューにPickerを横並びで配置する（iOS17）

はじめに

iOS17からPickerにpaletteというスタイルが追加されました。
これはメニュー内で使用すると効果が出るようです。

以前、ボタンを横並びで配置できる方法を紹介しました。
似ていますが、今回はボタンではなくPickerです。

サンプルアプリ

実装

import SwiftUI

enum Reaction: Identifiable, CaseIterable {
    case heart, star, bookmark

    var id: Self { self }
    
    var tint: Color {
        return switch self {
        case .heart: .red
        case .star: .yellow
        case .bookmark: .blue
        }
    }
}

struct ContentView: View {
    @State private var selection: Reaction = .heart

    var body: some View {
        Menu {
            Picker("", selection: $selection) {
                Label("heart", systemImage: "heart")
                    .tag(Reaction.heart)
                    .tint(Reaction.heart.tint)
                Label("star", systemImage: "star")
                    .tag(Reaction.star)
                    .tint(Reaction.star.tint)
                Label("bookmark", systemImage: "bookmark")
                    .tag(Reaction.bookmark)
                    .tint(Reaction.bookmark.tint)
            }
            .pickerStyle(.palette)
            .paletteSelectionEffect(.symbolVariant(.fill))
        } label: {
            Text("リアクション")
        }
    }
}

おわり

結構実用性ありそうですね

公式ドキュメント