MenuとPickerを組み合わせて使う方法

この記事では、MenuとPickerを組み合わせて使用する方法を解説します。
MenuとPickerの組み合わせは、ユーザーに選択肢を提供しつつ、限られたディスプレイ上でユーザーインターフェースをいかに効率的に配置するか有効に活用するのに役立ちます。

iOS：14.0以上
XCode（当サイトの環境）：15.0.1

MenuとPickerとは？
1. Menu
2. Picker
MenuとPickerの組み合わせ
実装方法
まとめ

MenuとPickerとは？

Picker

Pickerは、ユーザーに複数の選択肢から選ぶよう促すためのUIコンポーネントです。一般的に、リストやホイール形式で選択肢が表示されます。

MenuとPickerの組み合わせ

MenuとPickerを組み合わせることで、ユーザーに選択肢を提示しつつ、UIの整理を保つことができます。特に、選択肢が多い場合や、限られたスペースを有効に利用したい場合に適しています。

実装方法

SwiftUIでMenuとPickerを組み合わせる方法を以下のサンプルコードで示します。

import SwiftUI

struct MenuPickerSmpView: View {
    @State private var selectedOption = "オプション1"
    let options = ["オプション1", "オプション2", "オプション3"]

    var body: some View {
        Menu {
            Picker("選択", selection: $selectedOption) {
                ForEach(options, id: \.self) { option in
                    Text(option)
                }
            }
            .pickerStyle(.inline)
        } label: {
            Text("オプションを選択")
        }
        Text(selectedOption)
    }
}

このコードでは、Menuコンポーネント内にPickerを配置しています。Pickerは、ユーザーが選択したオプションをselectedOption変数にバインドします。

pickerStyleを変更することでデザインを変更することもできます。