SwiftUI自定义DatePicker如何扩大可点击区域？

问题描述 #

我正在开发一个自定义SwiftUI DatePicker，目前功能运行正常。最后需要优化的是扩大可点击区域，希望整个带边框的区域都能响应点击，而当前用户只能点击日历图标来选择日期。我尝试过使用ContentShape、调整frame和添加padding，但均未达到预期效果。如何在保持现有外观的前提下扩大可点击区域，让用户点击边框内任意区域都能唤起选择器？

解决方案 #

核心思路是让整个带边框的HStack区域触发DatePicker点击事件，同时保留原有UI布局。关键改动是将DatePicker移到HStack的背景层，铺满整个区域并隐藏默认UI，前景保留自定义的日期文本和日历图标。

修改后的完整代码：

struct DatePickerView: View {
    @State private var selectedDate = Date()

    var body: some View {
        VStack(alignment: .leading) {
            Text("Datum")
                .foregroundColor(.black)
            HStack {
                Text(selectedDate.formatted())
                Spacer()
                Image(systemName: "calendar")
                    .resizable()
                    .frame(width: 18, height: 20)
            }
            .padding(16)
            .overlay {
                RoundedRectangle(cornerRadius: 8)
                    .strokeBorder(lineWidth: 0.5, color: .black)
            }
            // 背景层放置DatePicker，覆盖整个可点击区域
            .background(
                DatePicker("", selection: $selectedDate, in: ...Date(), displayedComponents: .date)
                    .datePickerStyle(.compact)
                    .labelsHidden()
                    .opacity(0) // 隐藏默认UI，避免与自定义内容冲突
                    .allowsHitTesting(true) // 确保点击事件有效
            )
        }
    }
}

struct DatePicker_Previews: PreviewProvider {
    static var previews: some View {
        DatePickerView()
    }
}

关键改动说明 #

• 将DatePicker移至background修饰符中，自动匹配HStack的尺寸，覆盖整个带边框区域。
• 使用opacity(0)隐藏DatePicker默认界面，仅保留其点击交互能力。
• 移除原有的SwiftUIWrapper和限制大小的ZStack，直接在HStack前景展示自定义图标，简化布局。
• 点击边框内任意位置均可唤起日期选择器，完全保留原有视觉样式。

内容的提问来源于stack exchange，提问作者Wouter Dijks