SwiftUI自定义Menu中如何正常使用wheel样式Picker

SwiftUI 原生Menu底层基于UIKit的UIMenu实现，仅支持系统预置的菜单项类型（操作按钮、开关、子菜单等），无法承载自定义交互视图。你在Menu中放入.wheel样式的Picker时，系统会直接过滤掉无法识别的自定义视图，这就是点击按钮无响应、选择器不渲染的根本原因。
系统内置DatePicker的弹出面板不是用公开的Menu组件实现的，属于系统定制的弹出交互，要复刻同款效果不需要硬套Menu组件，用系统标准弹出容器承载自定义滚轮选择器即可。

iOS 16+ 零成本方案 #

iOS 16 开始系统提供的.popover配合紧凑尺寸适配，可以直接实现和系统DatePicker完全一致的弹出效果：面板为圆角浮层、无全屏模糊、点击外部自动关闭、锚定在触发按钮位置，完全匹配系统交互风格。
注意：.wheel样式的Picker必须明确指定高度（系统原生滚轮选择器的标准高度为216pt），否则会出现布局压缩、渲染异常的问题。

示例代码 #

struct WheelPickerMenu: View {
    let title: String
    @Binding var selection: Int
    let valueRange: Range<Int>
    @State private var showPicker = false
    
    var body: some View {
        Button {
            showPicker.toggle()
        } label: {
            HStack(spacing: 4) {
                Text("\(selection)")
                Image(systemName: "chevron.up.chevron.down")
                    .font(.caption.weight(.semibold))
            }
            .foregroundColor(.accentColor)
        }
        .popover(isPresented: $showPicker) {
            Picker(title, selection: $selection) {
                ForEach(valueRange, id: \.self) { value in
                    Text("\(value)").tag(value)
                }
            }
            .pickerStyle(.wheel)
            .frame(height: 216)
            .padding(.horizontal)
            .presentationCompactAdaptation(.popover)
            // 可选：固定弹出面板宽度，和系统DatePicker面板尺寸一致
            .frame(minWidth: 280)
        }
    }
}

// 调用示例：实现和系统风格一致的时长选择器
struct DurationPicker: View {
    @State private var hour = 0
    @State private var minute = 0
    
    var body: some View {
        Form {
            HStack {
                Text("时长")
                Spacer()
                HStack(spacing: 6) {
                    WheelPickerMenu(title: "小时", selection: $hour, valueRange: 0..<24)
                    Text("小时")
                    WheelPickerMenu(title: "分钟", selection: $minute, valueRange: 0..<60)
                    Text("分")
                }
            }
        }
    }
}

iOS 15及以下兼容方案 #

如果需要适配更低系统版本，可以通过ZStack自定义锚定浮层实现：

• 用GeometryReader获取触发按钮的位置，将选择器面板定位在按钮下方
• 添加点击外部关闭的手势
• 面板添加圆角、阴影，匹配系统弹窗视觉
• 不添加全屏模糊效果，和系统DatePicker交互保持一致

• 不要尝试在Menu、.contextMenu中嵌入滚轮选择器，这两类容器都不支持承载自定义滚动交互视图，会出现渲染异常、手势冲突的问题
• 不要使用默认样式的.sheet作为弹出容器，默认sheet是从底部弹出的抽屉样式，和系统DatePicker的锚定浮层交互差异较大
• 滚轮选择器不要省略高度设置，SwiftUI的WheelPickerStyle没有默认自适应高度，高度不足时会出现滚轮选项显示不全、滑动卡顿的问题

内容的提问来源于stack exchange，提问作者Ethan Kay