SwiftUI中HStack与LazyHGrid内按钮间距异常问题求助

针对你遇到的iPad 8代按钮间距异常问题，核心原因大概率是浮点像素计算的舍入误差，再加上视图默认布局行为的冲突，以下是具体修复方案：

问题分析 #

你直接用g.size.width/4给按钮设置固定宽度，但iPad 8代的屏幕逻辑分辨率（1080x1440）做除法时会产生非整数像素值，SwiftUI布局时会自动对齐到整数像素，导致四个按钮总宽度和HStack宽度不匹配，进而出现间隙。另外，.border(.gray, width:1)会给视图额外增加1px边框宽度，进一步加剧布局偏差。

修复方案 #

1. 改用均分布局替代固定宽度 #

放弃手动计算宽度，用frame(maxWidth: .infinity)让按钮自动均分HStack的可用宽度，从根源避免像素计算误差：

var body: some View {
    GeometryReader { g in
        HStack(spacing: 0) {
            switch view {
            case "text":
                Button(action: { view = "number" }) {
                    ZStack {
                        Color.white
                            .overlay(Rectangle().stroke(.gray, lineWidth: 1)) // 用overlay替代border，避免增加视图尺寸
                        Text("123")
                            .font(.system(size: g.size.width/30))
                            .foregroundColor(.black)
                    }
                }
                .buttonStyle(.plain) // 彻底移除按钮默认样式和内边距
                .frame(maxWidth: .infinity, maxHeight: g.size.height/2)
            case "number":
                Button(action: { view = "text" }) {
                    ZStack {
                        Color.white
                            .overlay(Rectangle().stroke(.gray, lineWidth: 1))
                        Text("ABC")
                            .font(.system(size: g.size.width/30))
                            .foregroundColor(.black)
                    }
                }
                .buttonStyle(.plain)
                .frame(maxWidth: .infinity, maxHeight: g.size.height/2)
            default:
                Text("Error")
                    .frame(maxWidth: .infinity, maxHeight: g.size.height/2)
            }
            
            // Clear按钮
            Button(action: { text = "" }) {
                ZStack {
                    Color.white
                        .overlay(Rectangle().stroke(.gray, lineWidth: 1))
                    Text("Clear")
                        .font(.system(size: g.size.width/30))
                        .foregroundColor(.black)
                }
            }
            .buttonStyle(.plain)
            .frame(maxWidth: .infinity, maxHeight: g.size.height/2)
            
            // Delete按钮
            Button(action: {
                if !text.isEmpty {
                    text.remove(at: text.index(before: text.endIndex))
                }
            }) {
                ZStack {
                    Color.white
                        .overlay(Rectangle().stroke(.gray, lineWidth: 1))
                    Text("Delete")
                        .font(.system(size: g.size.width/30))
                        .foregroundColor(.black)
                }
            }
            .buttonStyle(.plain)
            .frame(maxWidth: .infinity, maxHeight: g.size.height/2)
            
            // Space按钮
            Button(action: { text += " " }) {
                ZStack {
                    Color.white
                        .overlay(Rectangle().stroke(.gray, lineWidth: 1))
                    Text("Space")
                        .font(.system(size: g.size.width/30))
                        .foregroundColor(.black)
                }
            }
            .buttonStyle(.plain)
            .frame(maxWidth: .infinity, maxHeight: g.size.height/2)
        }
        .offset(y: -g.size.height/2)
    }
}

2. 字母LazyGrid的间距修复 #

对于字母LazyGrid，同样避免手动计算列宽，改用自适应网格项让列自动均分：

// 示例：3列无间距的LazyGrid
LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 0), count: 3), spacing: 0) {
    // 字母按钮内容
}

3. 额外注意点 #

• 用.buttonStyle(.plain)替代.borderless，确保完全移除按钮默认内边距和样式
• 用overlay(Rectangle().stroke(...))替代.border(...)，因为border会额外增加视图尺寸，导致布局计算偏差
• 尽量减少依赖GeometryReader的精确像素计算，优先使用SwiftUI自适应布局组件

内容的提问来源于stack exchange，提问作者Churro the Duck