How would you emulate the DatePicker Form Behaviour with a CustomPicker in a SwiftUI Form?

Viewed 70

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")
            }
        }
    }
}

example

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())
            }
        }
    }
}

current suboptimal

Any suggestions? Maybe looking at the DatePicker / Form code would provide insight?

0 Answers
Related