Can't overlap text with SwiftUI Datepicker

user_11825693 0
Viewed 183

I'm trying to cover a datepicker with a text view since the SwiftUI datepicker isn't very customizable. This way I can control how the label looks with different colors than the datepicker.

The problem i'm running into is that the datepicker doesn't register taps when something is placed on top of it. Either in a ZStack or a .overlay.

I've tried many different workaround such as setting the .opacity to zero in front of the text

ZStack {
    DatePicker("Due Date", selection: $startDate, displayedComponents: .date)
        .labelsHidden()
        .cornerRadius(10)
        .allowsHitTesting(true)
    Text("hi this is text")
        .allowsHitTesting(false)

}

Any help?

swiftui swift xcode ios
1 Answers

You can take the opposite approach and flip the order of the ZStack, putting the Text behind the DatePicker setting the DatePicker's opacity to a low value. Even cleaner is just using a background:

DatePicker("Due Date", selection: $startDate, displayedComponents: .date)
            .labelsHidden()
            .allowsHitTesting(true)
            .opacity(0.0101)
            .background(Text("Hi - this is text!"))

SwiftUI won't track hits on invisible elements, so the opacity can't be 0. In fact, it seems to stop registering with anything <= 0.1. So, it's not perfect, but it looks pretty invisible to me.

user_5609420
Related