SwiftUI中DatePicker嵌套带onTapGesture的VStack后无法点击打开日历的问题

嘿，这个问题我之前也遇到过！本质原因是SwiftUI的手势识别优先级规则——当你给外层VStack添加了onTapGesture之后，父视图的手势会优先于子视图（也就是你的DatePicker）的手势被触发，导致点击DatePicker的时候，事件直接被VStack的手势拦截了，日历自然就弹不出来啦。

下面给你两个实用的解决方案，你可以根据自己的需求选：

方案一：让DatePicker的点击手势优先响应 #

给每个DatePicker添加highPriorityGesture，强制让它的点击手势优先级高于父VStack的手势。这样点击DatePicker时，系统会优先处理它的点击事件，不会被父视图的手势抢走。

修改后的代码片段参考：

VStack(alignment: .leading) {
    if selectedOption == .dates {
        Text("When's your trip?")
            .font(.title2)
            .fontWeight(.semibold)
        VStack {
            DatePicker("From", selection: $startDate ,displayedComponents: .date)
                // 新增这行，提升DatePicker的手势优先级
                .highPriorityGesture(TapGesture())
            Divider()
            DatePicker("To", selection: $endDate, displayedComponents: .date)
                .highPriorityGesture(TapGesture())
        }
        .foregroundStyle(.gray)
        .font(.subheadline)
    } else {
        CollapsedPickerView(title: "When", description: "Add Dates")
    }
}
.onTapGesture {
    // 这里是你原来的VStack点击逻辑
}

方案二：仅让VStack的空白区域响应点击 #

如果你本来就只希望点击VStack的空白区域时触发手势，点击DatePicker时只打开日历不触发父视图手势，那可以把onTapGesture加到VStack的透明背景上，而不是直接给VStack加手势。这样DatePicker在前景层，点击它的时候会直接响应自己的事件，不会触发背景的手势。

代码片段参考：

VStack(alignment: .leading) {
    if selectedOption == .dates {
        Text("When's your trip?")
            .font(.title2)
            .fontWeight(.semibold)
        VStack {
            DatePicker("From", selection: $startDate ,displayedComponents: .date)
            Divider()
            DatePicker("To", selection: $endDate, displayedComponents: .date)
        }
        .foregroundStyle(.gray)
        .font(.subheadline)
    } else {
        CollapsedPickerView(title: "When", description: "Add Dates")
    }
}
// 把手势绑定到透明背景上，只响应空白区域点击
.background(
    Color.clear
        .onTapGesture {
            // 这里是你原来的VStack点击逻辑
        }
)

这两种方法都能完美解决你的问题，选哪个就看你实际的交互需求啦～

备注：内容来源于stack exchange，提问作者ADITYA RAJ