Zstack causes misalignment of Vstacks

📚 Official Books SwiftUI by Tutorials
1

Hi all,

While doing the RGBullsEye tutorial in chapter 3, when I add the Text(“60”) line inside the Zstack shown on page 48, it causes my target and guess colors in the Vstacks above to become misaligned - the guess one inside the Zstack and timer text above it no longer takes up the whole Vstack space like the target color Vstack. Any idea why just adding the Text(“60”) line causes this. The Zstack is there I both cases.

I’ve attached screen captures before and after adding the Text(“60”) line inside the Zstack.

Thanks,
Rick
image image

2

I am having the exact same issue. I would be happy to include a screen capture. I won’t since my view looks identical to Rick’s. Thanks!
Matt

3

I had tried the above code and it works fine for me.

    HStack {
            VStack {
                Color(red: rTarget, green: gTarget, blue: bTarget)
                self.showAlert ? Text("R: \(Int(rTarget * 255.0))"
                + "  G: \(Int(gTarget * 255.0))"
                + "  B: \(Int(bTarget * 255.0))")
                : Text("Match this color")
            }
          
            VStack {
                ZStack {
                    Color(red: rGuess, green: gGuess, blue: bGuess)
                    
                    Text("\(timer.counter)")
                        .font(.headline)
                        .foregroundColor(.black)
                        .padding()
                        .background(Color.white)
                        .mask(Circle())
                }
    
              Text("R: \(Int(rGuess * 255.0))  G: \(Int(gGuess * 255.0))  B: \(Int(bGuess * 255.0))")
            }
        }
4

Interesting. What version of Xcode are you running?

5

Version 11.1 (11A1027)

1 Like
6

Downloaded 11.1 and the problem was fixed. Thanks!

1 Like
7

golly, the volatility of this year’s Xcode versions is scary!