HomeiOS Developmentios - Aligning a date picker inside a grid

ios – Aligning a date picker inside a grid


By inspecting the UI hierarchy, SwiftUI appears to place the date picker inside an HStack, consisting of the label (exhibiting an empty string in your case), a Spacer, and a UIViewRepresentable representing a UIDatePicker.

enter image description here

(Purple is the HStack, blue is the Spacer, black is the UIViewRepresentable wrapping a UIDatePicker. The label exhibits “” so shouldn’t be seen.)

The Spacer makes the entire thing “broaden” horizontally, pushing the date picker to the proper.

Simply add .fixedSize() to the DatePicker, in order that it’s at its supreme measurement.

DatePicker("", choice: $date, displayedComponents: .date)
    .fixedSize()

Now the Spacer will not broaden, however be aware that there’s nonetheless a little bit of spacing:

enter image description here

That’s the default spacing that HStack provides between the label and the date picker. If you wish to take away that as nicely, you’ll be able to reap the benefits of the truth that DatePicker counts as a “labeled content material” (undecided if that is assured), and apply your individual .labeledContentStyle:

DatePicker("", choice: $date, displayedComponents: .date)
    .labeledContentStyle(ContentOnlyStyle())
// this removes the label, and solely exhibits the content material (on this case, the date picker)
struct ContentOnlyStyle: LabeledContentStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.content material
    }
}

Now you do not even want fixedSize.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments