This is what the DatePicker looks like in a form. It expands below the associated TextField which is created automatically.
import SwiftUI
struct DatePckrUI: View
{
@State private var birthDate = Date()
var body: some View {
Form {
DatePicker(selection: $birthDate, in: ...Date(), displayedComponents: .date) {
Text("Time")
}
}
}
}
How would you emulate the DatePicker Form Behaviour with a CustomPicker in a SwiftUI Form?
Is there a way to make a custom picker like this one expand & contract when you tap on the associated TextField? This behavior is automatic with the DatePicker.
The second picker in this example accepts touch but the first does not. And the background views have been colored and show an unexpected frame. What clues are missing?
import SwiftUI
struct SclPckr: View
{
var body: some View {
Form { SclPicker() }
}
}
struct SclPicker: View
{
@State var selectedInt = 0
@State var selectedDecimal = 0
var int = [Int](0..<30)
var decimal = [Int](0..<24)
var body: some View {
GeometryReader { geometry in
HStack {
Picker(selection: self.$selectedInt, label: Text("")) {
ForEach(0 ..< self.int.count) { index in
Text("\(self.int[index])").tag(index)
}
}
.frame(width: geometry.size.width/4, height: 100, alignment: .center)
.background(Color.red)
.pickerStyle(WheelPickerStyle())
Text(".")
Picker(selection: self.$selectedDecimal, label: Text("")) {
ForEach(0 ..< self.decimal.count) { index in
Text("\(self.decimal[index])").tag(index)
}
}
.frame(width: geometry.size.width/4, height: 100, alignment: .center)
.background(Color.blue)
.pickerStyle(WheelPickerStyle())
}
}
}
}
Any suggestions? Maybe looking at the DatePicker / Form code would provide insight?

