Nested ZStack fails to space contained views properly - SwiftUI bug?

I have a ZStack with two nested views. They are both the same type, RowView, and each RowView has another ZStack and a Text.

Both of these RowViews have the same height for some reason. And when I replace the RowView ZStack with just a Text, it works correctly.

Code Block SwiftUI
import SwiftUI
struct ContentView: View {
    var body: some View {
        ScrollView {
// remove this ZStack and things work with the other nested ZStacks
            ZStack {
                Rectangle()
                    .foregroundColor(.blue)
                    .shadow(radius: 5, x: 5, y: 5)
                
                VStack {
                    // Two independent RowViews:
                    
                    RowView(title: "Some really long text for some stuff lollola really long text for some stuff lollola")
                    
                    RowView(title: "and more")
                }
            }
            .padding()
        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
struct RowView: View {
    @State var title: String
    
    let boxSize: CGFloat = 40
    
    var body: some View {
        HStack(alignment: .top, spacing: nil) {
            Rectangle()
                .foregroundColor(.orange)
                .frame(minWidth: boxSize,
                       maxWidth: boxSize,
                       minHeight: boxSize,
                       maxHeight: boxSize)
                .padding(5)
            
            // this has each RowView set its own height correctly
//            Text(title)
//                .multilineTextAlignment(.leading)
//                .padding(5)
            // this forces both RowViews to have the same height, even though they are separate from each other
            ZStack {
                Rectangle()
                    .foregroundColor(.gray)
                
                Text(title)
                    .multilineTextAlignment(.leading)
                    .padding(5)
            }
            .padding(5)
            // this also forces both RowViews to have the same height
//            Rectangle()
//                .foregroundColor(.gray)
//                .overlay(Text(title).padding())
//                .padding(5)
        }
    }
}


It seems strange that both independent RowViews will end up having the same height.

Read the release notes and didn't see mention of this being a possible bug.

Copy pasta and see the results if you'd like. Notice the Gray ZStack containers are all almost the same height? Make the test of the first row even longer. Notice how the second one increases it's height?

Is this a bug,? Are ZStacks never supposed to be nested?


Accepted Reply

Figured this out. ZStacks take the largest child, and make that it's size. So in the cases above, it's taking the nested ZStack Rectangle, and making it fill as much as possible. If a frame is applied to the Rectangle in the nested ZStack, you can see the size of the RowView adjust to fit.

Replies

Figured this out. ZStacks take the largest child, and make that it's size. So in the cases above, it's taking the nested ZStack Rectangle, and making it fill as much as possible. If a frame is applied to the Rectangle in the nested ZStack, you can see the size of the RowView adjust to fit.

So what is a solution of the problem? How correctly use ZStack view inside another ZStack view?