swiftuilayoutvstack

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


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 SwiftUIenter image description here


Solution

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

    }