Question 130187 in Xcode Question posted in
Whether you're new to Xcode or an experienced developer, our archive has everything you need to know about this integrated development environment (IDE). From basic functionalities to advanced features, our archive covers a wide range of Xcode-related questions and answers. Browse our archive now and find solutions to your Xcode questions, and take your app development skills to the next level

Xcode – Why are SwiftUI buttons in a HStack and LazyHGrid spacing out incorrectly?

I have recently developed an iPadOS app on Xcode, and it is now on the app store. However, one user reported a problem with the app. During my testing, and on some iPads, it works fine, like this.

However, the user, using a 8th Generation iPad 2, saw a different screen, like
this.

The problem is especially noticeable in the HStack with the 123, Delete, Clear, and Space buttons and also in the alphabet grid (LazyGrid).
The code:

`

Other Code

var body: some View {
        GeometryReader { g in
            HStack(spacing: 0) {
                switch view {
                case "text":
                Button(action: {
                    view = "number"
                }) {
                    ZStack {
                    Rectangle()
                        .frame(width: g.size.width/4, height: g.size.height/2)
                        .foregroundColor(.white)
                        .border(.gray, width: 1)
                    Text("123")
                        .font(.system(size: g.size.width/30))
                        .foregroundColor(.black)
                    }
                }
                .buttonStyle(.borderless)
                case "number":
                    Button(action: {
                        view = "text"
                    }) {
                        ZStack {
                        Rectangle()
                            .frame(width: g.size.width/4, height: g.size.height/2)
                            .foregroundColor(.white)
                            .border(.gray, width: 1)
                        Text("ABC")
                            .font(.system(size: g.size.width/30))
                            .foregroundColor(.black)
                        }
                    }
                    .buttonStyle(.borderless)
                default:
                    Text("Error")
                }
                Button(action: {
                    text = ""
                }) {
                    ZStack {
                    Rectangle()
                        .frame(width: g.size.width/4, height: g.size.height/2)
                        .foregroundColor(.white)
                        .border(.gray, width: 1)
                    Text("Clear")
                        .font(.system(size: g.size.width/30))
                        .foregroundColor(.black)
                    }
                }
                .buttonStyle(.borderless)
                Button(action: {
                    if text != "" {
                    text.remove(at: text.index(before: text.endIndex))
                                                }
                }) {
                    ZStack {
                    Rectangle()
                        .frame(width: g.size.width/4, height: g.size.height/2)
                        .foregroundColor(.white)
                        .border(.gray, width: 1)
                    Text("Delete")
                        .font(.system(size: g.size.width/30))
                        .foregroundColor(.black)
                    }
                }
                .buttonStyle(.borderless)
                Button(action: {
                    text += " "
                }) {
                    ZStack {
                    Rectangle()
                        .frame(width: g.size.width/4, height: g.size.height/2)
                        .foregroundColor(.white)
                        .border(.gray, width: 1)
                    Text("Space")
                        .font(.system(size: g.size.width/30))
                        .foregroundColor(.black)
                    }
                }
                .buttonStyle(.borderless)
            }
            .offset(y: -g.size.height/2)
        }
    }

Other Code

`

I have already set spacing in the HStack to 0, expecting it to remove the space between the buttons, but it has no effect on it.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The problem was actually on the user's end. They had turned on "button shapes" in their accessibility settings, which made the buttons have an extra border.


  2. 0

    How about trying to simplify the code and use stacks to your advantage.
    The key to this is to let the buttons expand to fill space by using .frame(maxWidth:.infinity) instead of the default behavior which is to fit to the content.

    struct KeysViews: View {
 var body: some View {
    VStack (alignment:.center,spacing: 1.0) {
        HStack (spacing:1.0) {
            but("123")
            but("Clear")
            but("Space")
        }.frame(maxWidth:.infinity)
        HStack (spacing:1.0) {
            ForEach(["A","B","C","D","E",","],id:.self) {c in
                but(c)
            }
        }
        HStack (spacing:1.0) {
            ForEach(["F","J","H","I","J","."],id:.self) {c in
                but(c)
            }
        }
        HStack (spacing:1.0) {
            ForEach(["K","L","M","N","O","!"],id:.self) {c in
                but(c)
            }
        }
        HStack (spacing:1.0) {
            ForEach(["P","Q","R","S","T","?"],id:.self) {c in
                but(c)
            }
        }
    }.frame(maxWidth:.infinity).background(.gray).padding()
}

func but(_ text : String) -> some View {
    Button(text, action: {}).frame(maxWidth:.infinity).background(.white)
}
}

    On iPad
    On iPhone

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search