What is the best way to have a child subview take up 2/3rds of the space instead of the default 50/50 split?

Viewed 59

It looks like when using VStack in SwiftUI, if you have 2 items, it always takes up 50% for each of those two items.

NavigationView {
    VStack {
        Text("SwiftUI").background(Color.blue)
        Divider()
        Text("rocks").background(Color.red)
    }
}

Is there a way to make it so that say, the background/2nd view where Text("rocks") could take up 2/3rds or 66.66% of the entire view? Or should this not be done with ZStacks?

1 Answers

You need GeometryReader for this purpose, like

NavigationView {
    GeometryReader { gp in
        VStack {
            Text("SwiftUI")
                .background(Color.blue)
            Divider()
            Text("rocks")
                .frame(maxHeight: gp.size.height * 2 / 3) // for resizable
                //.frame(height: gp.size.height * 2 / 3) // for exact
                .background(Color.red)
        }
    }
}
Related