CODEWITHSUNDEEP
iosswiftxcodeswiftui
jlf0dev
jlf0dev

Reputation: 115

Can't overlap text with SwiftUI Datepicker

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?

Upvotes: 2

Views: 984

Answers (1)

jnpdx
jnpdx

Reputation: 52575

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.

Upvotes: 3

Related Questions