Duration picker view(multicomponent picker) in swiftUI - ios

Question

I have a custom swiftUI picker that takes a duration in the form of the picture above. The issue is, I have to use hard coded frame in my code to make it show and appear. I will explain further below.
var body: some View {
let hours = [Int](0...maxHours)
let minutes = [Int](0...maxMinutes)
HStack(spacing: 0) {
Picker(selection: self.selection.hours, label: Text("")) {
ForEach(0..<maxHours, id: \.self) { index in
Text("\(hours[index]) hr")
.foregroundColor(Color(Asset.Color.V2.white.color))
}
}
.labelsHidden()
.pickerStyle(.wheel)
Picker(selection: self.selection.minutes, label: Text("")) {
ForEach(0..<maxMinutes, id: \.self) { index in
Text("\(minutes[index]) min")
.foregroundColor(Color(Asset.Color.V2.white.color))
}
.frame(maxWidth: .infinity, alignment: .center)
}
.labelsHidden()
.pickerStyle(.wheel)
}
}
The issue is I am combining two pickers and it is not a native approach. So it'll end up looking like this:
The frame becomes very small and off when it is part of a larger component.
If I remove the HStack and have one picker, the frame and sizing will fix themselves.
note: Ignore the colors, my only concern is the frame sizes that get messed up when I have two pickers.
problem 1: This picker is part of another large component. Here is how the structure is set up, and apologies in advance as I cannot share all of the code as it will be be more than 5000 lines of code.
We have this:
VStack {
element1
element2
...
element4
.onTap{
showCustomPickerView = true
}
.frame(width: 200, height: 200)
if showCustomPickerView {
CustomPickerView()
}
element5
}
So when we click on element4 which is essentially an HStack, we want our custom picker view to appear underneath it. The issue is I do not want hard coded frame values, but when I remove the frame, the CustomPickerView collapses and becomes like the picture I posted. If my CustomPickerView has only one picker in it, it shows just fine without the frame. But since I have two and I they are in an HStack, it does not show their default size, and I am guessing it shows the HStack size instead.
update 1: I added
extension UIPickerView {
override open var intrinsicContentSize: CGSize {
CGSize(width: UIView.noIntrinsicMetric, height: super.intrinsicContentSize.height)
}
}
at my file, as without it, the right picker would get mixed with the first one, but the framing issue still persists.

Answer 1

I've slightly modified your solution, and it works fine for me:
#main
struct Test: App {
#State var hourSelection = 0
#State var minuteSelection = 0
var body: some Scene {
WindowGroup {
CustomDatePicker(hourSelection: $hourSelection, minuteSelection: $minuteSelection)
}
}
}
struct CustomDatePicker: View {
#Binding var hourSelection: Int
#Binding var minuteSelection: Int
static private let maxHours = 24
static private let maxMinutes = 60
private let hours = [Int](0...Self.maxHours)
private let minutes = [Int](0...Self.maxMinutes)
var body: some View {
GeometryReader { geometry in
HStack(spacing: .zero) {
Picker(selection: $hourSelection, label: Text("")) {
ForEach(hours, id: \.self) { value in
Text("\(value) hr")
.tag(value)
}
}
.pickerStyle(.wheel)
.frame(width: geometry.size.width / 2, alignment: .center)
Picker(selection: $minuteSelection, label: Text("")) {
ForEach(minutes, id: \.self) { value in
Text("\(value) min")
.tag(value)
}
.frame(maxWidth: .infinity, alignment: .center)
}
.pickerStyle(.wheel)
.frame(width: geometry.size.width / 2, alignment: .center)
}
}
}
}
The main idea here is that:
You do not specify the height of the picker, so the GeometryReader adjusts its size to correspond to the default Picker height.
Change the width from geometry.size.width / 3 to geometry.size.width / 2 (as there are only two pickers).
Remove the unnecessary modifiers (.compositeGroup(), .clipped(), .etc).
Move the picker into a separate struct for ease of use.
Alternatively, you can manually specify a fixed size for the custom component using the .frame(height:) modifier.
Let me know if it still collapses