UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

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

3      

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! :-)

3      

Hacking with Swift is sponsored by Superwall

SPONSORED Superwall lets you build & test paywalls without shipping updates. Run experiments, offer sales, segment users, update locked features and more at the click of button. Best part? It's FREE for up to 250 conversions / mo and the Superwall team builds out 100% custom paywalls – free of charge.

Learn More

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.