ScrollView干扰GeometryReader内视图，iOS14下拉菜单实现难题

一、修复 TextField 无法点击的问题 #

GeometryReader 嵌套 ScrollView 时，常因布局优先级或触摸区域计算偏差导致 TextField 无法响应点击，直接用以下方案解决：

1. 强制 ScrollView 响应全区域触摸
   给 ScrollView 添加 .contentShape(Rectangle()) 修饰符，强制其内容区域的所有范围都能响应触摸事件，避免 GeometryReader 的空间分配压缩可交互区域：

ScrollView {
    // 包含 TextField 的内容
}
.contentShape(Rectangle())

2. 明确 ScrollView 的尺寸约束
   在 GeometryReader 内部给 ScrollView 设置明确的尺寸范围，确保它能占满可用空间，避免布局偏移导致点击失效：

GeometryReader { geo in
    ScrollView {
        // 你的内容
    }
    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
}

二、iOS14 实现 TextField 正下方悬浮下拉菜单（不顶移其他元素） #

由于 iOS14 不支持 .overlay 的动态位置绑定，用 ZStack + PreferenceKey 实现悬浮菜单，完全不影响原有布局：

步骤1：定义 PreferenceKey 捕获 TextField 位置 #

用 PreferenceKey 获取 TextField 在全局坐标系中的位置和尺寸：

struct TextFieldFrameKey: PreferenceKey {
    static var defaultValue: CGRect = .zero
    static func reduce(value: inout CGRect, nextValue: () -> CGRect) {
        value = nextValue()
    }
}

步骤2：绑定 TextField 位置并控制菜单显示 #

在原有布局外层套 ZStack，把菜单和主内容放在同一层级，通过捕获的 TextField 位置定位菜单：

@State private var isMenuVisible = false
@State private var textFieldGlobalFrame = CGRect.zero
@State private var inputText = ""

var body: some View {
    ZStack(alignment: .topLeading) {
        // 原有的 GeometryReader + ScrollView 布局
        GeometryReader { geo in
            ScrollView {
                // 示例顶部内容
                Text("顶部占位内容")
                    .padding()
                
                TextField("请输入内容", text: $inputText)
                    .padding()
                    .border(Color.gray)
                    // 捕获 TextField 的全局位置
                    .background(GeometryReader { proxy in
                        Color.clear.preference(key: TextFieldFrameKey.self, value: proxy.frame(in: .global))
                    })
                    .onTapGesture {
                        isMenuVisible.toggle()
                    }
                
                // 示例列表内容
                ForEach(0..<20) { index in
                    Text("列表项 \(index)")
                        .padding()
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .contentShape(Rectangle()) // 修复点击问题
        }
        
        // 悬浮下拉菜单
        if isMenuVisible {
            CustomDropdownMenu()
                // 定位到 TextField 正下方居中位置
                .position(x: textFieldGlobalFrame.minX + textFieldGlobalFrame.width/2, y: textFieldGlobalFrame.maxY)
                .transition(.opacity.combined(with: .move(edge: .top)))
        }
    }
    // 更新 TextField 的位置
    .onPreferenceChange(TextFieldFrameKey.self) { newFrame in
        textFieldGlobalFrame = newFrame
    }
    // 点击空白区域关闭菜单
    .onTapGesture {
        isMenuVisible = false
    }
}

步骤3：自定义下拉菜单视图 #

给菜单添加背景和阴影，确保悬浮在所有内容上方：

struct CustomDropdownMenu: View {
    var body: some View {
        VStack(spacing: 0) {
            Text("选项一")
                .padding(.vertical, 12)
                .padding(.horizontal, 20)
            Divider()
            Text("选项二")
                .padding(.vertical, 12)
                .padding(.horizontal, 20)
            Divider()
            Text("选项三")
                .padding(.vertical, 12)
                .padding(.horizontal, 20)
        }
        .frame(width: 220)
        .background(Color.white)
        .cornerRadius(8)
        .shadow(color: .black.opacity(0.2), radius: 6, x: 0, y: 2)
        // 避免菜单被点击时触发外层的关闭手势
        .highPriorityGesture(TapGesture())
    }
}

注意事项 #

• 如果 TextField 靠近屏幕底部，需考虑安全区，可通过 UIApplication.shared.windows.first?.safeAreaInsets.bottom 获取底部安全区高度，调整菜单的 y 坐标避免被遮挡。
• ScrollView 滚动时，onPreferenceChange 会自动更新 TextField 的位置，菜单会同步移动，保持在 TextField 正下方。
• 给菜单添加 .highPriorityGesture(TapGesture()) 是为了避免点击菜单时触发 ZStack 的关闭手势，保证菜单选项能正常响应点击。

内容的提问来源于stack exchange，提问作者Ios Dev