iosswiftswiftuisize

SwiftUI view width size not respected when adding spacer

I have this bug that I haven't been able to figure out. My button on the right of my view get infinitely expanded over safe area when I add a spacer in the middle of my container.

Here you can see the view expand under the dynamic island and until the border of the screen. Safe area is ignored and I don't know why.

with spacer

without spacer

Now the related code to this view is :

struct FighterView: View {

@Bindable var fighter: Fighter

var body: some View {
    
    HStack {
        
        TextField("", text: $fighter.name, prompt: Text(fighter.color.rawValue).foregroundStyle(Color.black.opacity(0.1)))
            .myModifiers
        
        ZStack {
            // Those views are not visible on the screen shot

            PenaltyView(color: fighter.isHansokumake ? .jSred : .jSyellow)
                .hidden(fighter.shido == 0 && !fighter.isHansokumake)
            
            PenaltyView(isTilted: true)
                .offset(x: 15, y: 0)
                .hidden(fighter.shido != 2 || fighter.isHansokumake)
            
        }
        
        // This is the spacer that I commented on the second screen and make the button the right size
        Spacer()

        DoubleTapButton(tapAction: {
            
            fighter.isIppon = true
            
        }, doubleTapAction: {
            
            fighter.isIppon = false
            
        }, title: fighter.ipponString)
        .buttonStyle(PointButtonStyle())

        DoubleTapButton(tapAction: {
            
            fighter.addWazaari()
            
        }, doubleTapAction: {
            
            fighter.removeWazaari()
            
        }, title: "\(fighter.isIppon ? 0 : fighter.wazaari)")
        .buttonStyle(PointButtonStyle())
    }
    .foregroundStyle(fighter.color.primary)
}

}

Any tip or lead would be much appreciated as I'm almost done with this project but this I can't figure it out.

Solution

  • This problem may be happening because you are using a .background modifier to set the background inside PointButtonStyle and this is ignoring the safe area edges by default. Something like :

    .background(myButtonBackground)

    This goes to background(_:ignoresSafeAreaEdges:)

    To fix, try supplying an empty set of edges to ignore:

    .background(myButtonBackground, ignoresSafeAreaEdges: [])

    Alternatively, just change the round parentheses to curly braces:

    .background { myButtonBackground }

    This goes to background(alignment:content:) instead, which does not ignore the safe area by default.

    If that doesn't fix it, please show how PointButtonStyle is implemented.