How can I measure an item inside of a VStack in SwiftUI?

Question

I am building an app for iOS in Xcode. New with this, as you can see.

I created a VStack, with 3 rectangles in it, all of them taking al the width of the screen (the app is only portrait):

First one is 140px high.
Second one is variable, depending on the device.
Third rectangle is again 140px high.

My question is: how can I know the height of the second rectangle? That second rectangle is the game board and I need to know the dimensions.

Bonus question: how do take into the account the safe area in devices with notch and ignore it on devices without notch?

Thanks in advance!

I tried to place a shape with Stack at x:0 y:0 and surprisingly for me, that is the upper left corner of the second rectangle. With UI bounds.height it places way below the bottom edge of the simulator.

`SwiftUI.Layout` is probably the most comprehensive solution — lorem ipsum, Jul 06 '23 at 23:37

score 0 · Answer 1 · answered Jul 07 '23 at 14:02

how can I know the height of the second rectangle? That second rectangle is the game board and I need to know the dimensions.

In the simplest form, the solution could be like this:

struct SomeScreen: View {
    
    @State var boardHeight: CGFloat = 0 // <-- preserve the height
    
    var body: some View {
        VStack(spacing: 0) {
            Rectangle() 
                .fill(.red)
                .frame(height: 140) // <-- first rectangle takes fixed height
            GeometryReader { geometry in
                Rectangle() // <-- takes the remaining height
                    .fill(.green)
                    .onAppear {
                        boardHeight = geometry.size.height
                    }
            }
            Rectangle()
                .fill(.blue)
                .frame(height: 140) // <-- last rectangle takes fixed height
            Text("\(boardHeight)")
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity) // <-- takes the whole screen
    }
}

So you define 2 rectangles with the fixed height, the one in the middle then takes "the remaining space". And we set VStack that holds them to take the whole screen, so middle rectangle will occupy the remaining space of the screen. GeometryReader will give you the height of that rectangle

But it also really depends what you are doing. Also consider not fixing the height to specific numbers: define constraints and let layout help you with dimensions. Maybe the space could be dictated by the content (with some maxHeight defined), or maybe you could define it relatively to the size of the screen, e.g. 20% (using the same GeometryReader).

Bonus question: how do take into the account the safe area in devices with notch and ignore it on devices without notch?

By default iOS would preserve the safe area, and I recommend letting iOS manage it for you even on the phones without the notch, especially for interactive content and text. You can, however place background (since it's not interactive) so that it takes the entire space, including the areas that are not safe.

In general this is done with the ignoresSafeArea modifier:

VStack {
    Rectangle()
    ...
}
.background(
    Color.yellow.ignoresSafeArea()
)

How can I measure an item inside of a VStack in SwiftUI?

1 Answers1