SwiftUI: VStack Layout with 2 fix size SubVIews and the 3rd subview (in Middle) taking rest of available height

Question

I need to make a screen in SwiftUI where the 1st and 3rd subviews of a VStack have fixed size and I want the 2nd in the middle to take the rest of the available height (This value will differ based on device). How can this be achieved in SwiftUI

Answer 1

You can try something like below code, Replacing HStacks with your views

struct TestSwiftUIView: View {
var body: some View {
    VStack {
        HStack { //View 1 - fixed
        }
        .frame(maxWidth: .infinity, minHeight: 100)
        .background(Color.red)
        HStack { //View 2 - expanded
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.blue)
        HStack { //View 3 - fixed
        }
        .frame(maxWidth: .infinity, minHeight: 100)
        .background(Color.green)
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(Color.black)
}

}