SwiftUI中如何实现点击TextField弹出下拉式Picker菜单

当前代码通过offset(y: -100)强制将Picker偏移到TextField上方，我们可以调整布局与交互逻辑，实现点击触发区域后Picker在其下方展开的下拉菜单效果：

修改后的完整代码 #

struct PickerView: View {
    
    @State private var options = ["Option 1", "Option 2", "Option 3"]
    @State private var selectedOption = "Option 1"
    @State private var showPicker: Bool = false

    var body: some View {
        VStack(spacing: 4) {
            // 下拉菜单触发栏
            HStack {
                Text(selectedOption)
                    .foregroundColor(.primary)
                Spacer()
                Image(systemName: showPicker ? "chevron.up" : "chevron.down")
                    .foregroundColor(.gray)
            }
            .padding()
            .background(Color.gray.opacity(0.2))
            .cornerRadius(5.0)
            .onTapGesture {
                showPicker.toggle()
            }
            
            // 下拉选项区域
            if showPicker {
                Picker("Options", selection: $selectedOption) {
                    ForEach(options, id: \.self) { option in
                        Text(option).tag(option)
                    }
                }
                .pickerStyle(.inline)
                .padding()
                .background(Color.white)
                .cornerRadius(5.0)
                .shadow(radius: 5)
                .transition(.move(edge: .top).combined(with: .opacity))
                .animation(.easeInOut, value: showPicker)
            }
        }
        .padding()
    }
}

关键修改说明 #

• 移除原代码中错误的offset(y: -100)，让Picker自然跟随在触发栏下方
• 将禁用的TextField替换为Text组件，既保留选中值展示，又避免禁用输入的交互违和感
• 改用条件渲染控制Picker显示/隐藏，避免未展开时占据布局空间
• 添加过渡动画，让菜单展开/收起的过程更流畅自然
• 调整触发区域的点击逻辑，仅点击顶部栏时切换Picker状态，避免点击选项时菜单意外关闭

内容的提问来源于stack exchange，提问作者Enamul Haque