SwiftUI中如何在HStack内减小按钮水平间距且不改变字体大小

优化方案 #

你当前的问题来自两个错误的布局逻辑：一是先给按钮设置了过小的固定宽度再加内边距，挤压了字符的渲染空间；二是用HStack负间距强制缩紧排列，导致按钮可点击区域重叠偏移。按以下方式调整代码即可在不修改字体大小的前提下实现紧凑排列：

struct KeyboardView: View {

    let KeyboardStack = [["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
                          ["A", "S", "D", "F", "G", "H", "J", "K", "L"],
                          ["Z", "X", "C", "V", "B", "N", "M"]]

    var body: some View {
        VStack(spacing: 9) {                      
            ForEach(KeyboardStack.indices, id: \.self) { row in
                HStack(spacing: 2) { // 此处数值越小，按钮间空隙越小
                    ForEach(KeyboardStack[row], id: \.self) { char in
                        Button(char) {}
                        .font(.system(size: 15, weight: .regular, design: .default))
                        .foregroundColor(.white)
                        // 仅通过内边距控制按钮尺寸，不限制固定宽度，避免挤压字符
                        .padding(.vertical, 4)
                        .padding(.horizontal, 5) // 此处数值越小，按钮本身宽度越窄
                        .buttonStyle(PlainButtonStyle())
                    }
                }
                .frame(height: 19.5, alignment: .center)
            }
        }
        .frame(width: 255, height: 60, alignment: .center)
    }
}

调整说明：

• 移除按钮的固定width约束，改为用左右内边距控制按钮宽度，字符渲染空间不会被压缩，W这类宽字符可正常显示
• HStack使用正的小间距控制按钮间隙，不会出现按钮重叠、可点击区域偏移的问题
• 移除冗余的外层宽度约束，避免布局尺寸冲突
• 需要更紧凑的排列时，同步调小HStack的spacing值和按钮的padding(.horizontal)值即可。

内容的提问来源于stack exchange，提问作者yo1nk