SwiftUI view layouts with frame maxHeight and .infinity

1
votes

How to layout views in SwiftUI in such way

  1. I have input fields that I want to stretch to fill available space
  2. This inputs are placed in VStack in such way that I am giving them frame(height: 40)
  3. This VStack is inside white box which has frame(maxHeight: geometry.size.height * 0.8)

And the last white box is not adjusting to number of inputs in for VStack but rather takes 0.8 space and then this inputs are spread inside VStack instead (more spacing than needed is added.

I do not understand why such thing is happening. 

FormView()
     .frame(
       maxWidth: geometry.size.width * 0.85,
        maxHeight: geometry.size.height*0.85
)

Form View contains: 

 VStack(spacing: 4) {
            FormInput(label: "First Name", input: self.$firstName) {
                isEditing in

                self.avoider.editingField = 0
            }
            .frame(height: 40)
            .padding(0)
            .avoidKeyboard(tag: 0)
1
layoutframeswiftui
I don't get what you want and what you have. – Mojtaba Hosseini
I fount it. Generally I have white rectangle FormView in the center (that is set to max 85% of screen height) then I have input fields that are said to be 40pt height (they are inside VStack) FormInput has frame maxWidth/maxHeight set to .infinity. And it works just this .avoidKeyboard modifier that set .preference() and was using GeometryReader make this layout was breaking. I changed just order of frame() and avoidKeybaord() modifiers and it start working great again! – Michał Ziobro

1 Answers

2
votes

I found the reason why sometimes View (layout) does not collapse to take smallest possible space, but instead expands to maxHeigh/maxWidth.

It happens when somewhere in between we use 

GeometryReader { geometry in

    VStack { ... }

}

Then those Views does not collapse and spread to maxHeight. I have this GeometryReader used inside .avoidKeyboard(tag: 0)