Adding a Button in Chapter 1 causes wild UI rendering

I’m going through the book on Xcode Version 11.0 (11A420a), and everything renders fine until you add the button. Then the highest-level VStack becomes very short (as in, not much height) and the Colours compress. When I mouse-over the highest-level VStack, the little border that appears to denote its bounds reveals that it’s taking up around 30% of vertical space available.

It’s behaving as if there’s a Spacer underneath the last view. This is the case whether I put the Button over or below the Slider.

Adding a frame modifier to the highest-level VStack with a height value of 2-500 makes it look like there’s a Spacer on the top and 2 Spacers on the bottom.

Checked and re-checked the code 5x and it’s the same as in the book.

Anyone know what’s going on with this, and/or how to fix it? Tried everything on Stackoverflow and didn’t get any luck.

Update: Putting frame height on the Button helped; I used a value of 20-30 and now it basically looks the same as the book.

I added .layoutPriority(0.1) to the HStack group above the button so it would stretch first. This seems to have fixed it and it matches the layout shown in the book.

1 Like

Thanks for sharing this. I’ve had to use your solution again since this initial post!

Glad it worked for you. Hopefully most example code will work without any extra fixes :slightly_smiling_face: