NEW: My new book Pro SwiftUI is out now – level up your SwiftUI skills today! >>

SOLVED: Is this a Spacer() bug to report? - Flashzilla in HSW SwiftUI edition

Forums > Books

I'm working on Chapter 17 'Flashzilla'

The problem is that the Edit card button appears almost entirely off the right-hand edge of the screen on both 1st and 2nd gen iPhone SE simulators, but is correctly positioned on iPhone 11 Pro Max.

The code is as follows:

            VStack {

                HStack {

                    Spacer()

                    Button(action: {
                        showingEditScreen = true
                    }) {
                        Image(systemName: "plus.circle")
                            .padding()
                            .background(Color.black.opacity(0.7))
                            .clipShape(Circle())
                    }
                }

                Spacer()
            }
            .foregroundColor(.white)
            .font(.largeTitle)
            .padding()

If I try this code as the entire ContentView then it works fine on every single simulator I tried but if I put it into the project code it misbehaves. I thought I'd probably typed it wrongly so I loaded up Paul's Project 17 and ran it - it behaves exactly the same, namely the button is 90% off the right of the screen on both SE simulators but fine on iPhone 11 Max Pro.

I've stared at the code for a while but can't see anything wrong - is this something to report to Apple?

BTW, Paul's project builds for iOS 13, mine for iOS 14. I'm running iOS 14 in the simulators in Xcode 12 B 6 running on macOS 10.15.6

1      

The code above is one part of a Zstack{} ; the first View in the ZStack is an Image("background") which has a .scaledToFill() modifier applied. The pixel dimensions of the "background" image are larger than the iPhone SE (2nd gen - and 1st!).

If I change it to .scaledToFit() then I end up with white bars at the top and bottom but the button appears correctly.

If I remove the .scaledToFill() modifier then the missing Edit Card button appears as it should and the background image looks fine too. It is an abstract image so haven't tried it with something "real".

My theory is that it seems as though the Edit Button is being drawn on top of the Image() and then that composited image is being .scaledToFill() which then pushes it almost off the edge of the screen. This doesn't happen on the iPhone 11 Pro Max as the screen can accommodate the image anyway.

I don't know enough about SwiftUI to know if this is a bug in the original code or a bug in SwiftUI but whatever it is, it's not right but I think I can fix it now! :-)

1      

Hacking with Swift is sponsored by Play

SPONSORED Play is the first native iOS design tool created for designers and engineers. You can install Play for iOS and iPad today and sign up to check out the Beta of our macOS app with SwiftUI code export. We're also hiring engineers!

Click to learn more about Play!

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.