You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

SwiftUI如何实现类似Picker的自定义下拉菜单?

实现自定义Picker式下拉视图的问题

我一直在构思如何实现类似默认Picker的按钮下拉视图,尝试找到像Picker那样在父视图上方覆盖视图的方法。我实现了一个DropdownMenu View,但它并不符合预期:

struct DropdownMenu<T, Views>: View {
    var title: String
    var selection: Binding<T>
    var options: [T]
    
    init(title: String, selection: Binding<T>, options: [T], @ViewBuilder views: @escaping () -> TupleView<Views>) {
        self.title = title
        self.selection = selection
        self.options = options
        self.content = views().getViews
    }
    
    @State private var showMenu: Bool = false
    
    var content: [AnyView] = []
    
    var body: some View {
        Button {
            showMenu = true
        } label: {
            Text(title)
                .frame(minWidth: 100)
        }
        .buttonStyle(BorderedButtonStyle())
        .overlay {
            ScrollView {
                VStack {
                    ForEach(content.indices, id: \.self) { index in
                        Button {
                            selection.wrappedValue = options[index]
                            showMenu = false
                        } label: {
                            content[index]
                                .frame(width: 350)
                                .frame(minHeight: 65)
                        }
                    }
                }
            }
            .frame(width: 350, height: 225)
            .background(.ultraThinMaterial)
            .clipShape(RoundedRectangle(cornerRadius: 10))
            .zIndex(99999)
            .opacity(showMenu ? 1 : 0)
        }
    }
}

该视图存在以下问题:

  • 即使设置很高的zIndex,内容仍无法覆盖父视图内的内容;
  • 需要传入选项列表,且将传入视图转换为AnyView的方式繁琐;
  • 无法感知自身是否靠近屏幕边缘,无法调整位置以确保完全显示。

我考虑理想方案或许是实现Layout,它能解决视图在屏幕范围内的显示问题,还能像Picker的.tag那样用layoutValue存储标签值。但Layout似乎无法响应子视图的点击事件,无法通知DropDownView隐藏覆盖布局并更新绑定变量。除非能从View中访问layoutValue,否则无法创建像Picker那样简洁的视图定义,对吗?

当前版本的SwiftUI中,能否实现一个可覆盖任意视图、支持类似.tag修饰符设置选项视图关联值、并能像Picker那样更新绑定选择变量的视图?简言之,能否实现完全自定义的Picker?

内容的提问来源于stack exchange,提问作者Matt Braniff

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.29 05:11:13