.Clipped() not working on Pickers SwiftUI - ios

Question

I need to create a view that has 2 Pickers and 2 DatePickers.
In order to avoid having them overlapping each other, I used .clipped(). However, this is not working.
I can successfully resize the pickers, but I cannot limit the "selection area" to their frame size.
Here is my code:
VStack(spacing: 10) {
Picker(selection: self.$dayTypeSelectedIndex, label: Text("")) {
ForEach(0 ..< self.dayTypes.count, id: \.self) {
Text(self.dayTypes[$0])
.foregroundColor(Color.black)
}
}
.pickerStyle(SegmentedPickerStyle())
.labelsHidden()
.clipped()
Spacer()
Group {
DatePicker("", selection: self.$dateIntervalStart, displayedComponents: .hourAndMinute)
.labelsHidden()
.colorInvert()
.colorMultiply(Color.black)
.frame(maxHeight: 50)
.clipped()
Spacer()
Text("às")
.foregroundColor(Color.black)
Spacer()
DatePicker("", selection: self.$dateIntervalEnd, displayedComponents: .hourAndMinute)
.labelsHidden()
.colorInvert()
.colorMultiply(Color.black)
.frame(maxHeight: 50)
.clipped()
}
Spacer()
HStack {
Picker(selection: self.$tripNotificationDelta, label: Text("")) {
ForEach(0...60, id: \.self) {
Text($0 < 10 ? "0\($0)" : "\($0)")
.foregroundColor(Color.black)
}
}
.labelsHidden()
.frame(maxWidth: 50, maxHeight: 50)
.clipped()
Text("mins before trip")
.foregroundColor(Color.black)
}
}
}
What am I doing wrong?
I'm using XCode 12. Plus, this interface is being built for devices not running iOS 14.
Thanks!

Answer 1

So, I figured it out. Just put .compositingGroup() before .clipped(). Something like this:
DatePicker("", selection: self.$dateIntervalEnd, displayedComponents: .hourAndMinute)
.labelsHidden()
.colorInvert()
.colorMultiply(Color.black)
.frame(maxHeight: 50)
.compositingGroup()
.clipped()

Answer 2

As mentioned in here
Adding this simple extension solves the problem with overlapping scroll areas. You don't need to add .compositingGroup() and .clipped()
extension UIPickerView {
override open var intrinsicContentSize: CGSize {
return CGSize(width: UIView.noIntrinsicMetric, height: super.intrinsicContentSize.height)
}
}