SwiftUI中按钮显示时如何避免HStack内文本布局移位

问题根源在于你用了硬编码的负.padding(.leading, -180)定位文本，这种方式完全依赖固定数值，当右侧按钮出现时，HStack整体布局空间变化，就会导致文本偏移。另外HStack内的Spacer使用逻辑不稳定，也加剧了布局偏移问题。

下面是修复后的代码，核心思路是移除硬编码负padding，用合理的布局容器分配空间，让文本和按钮的位置相互独立：

HStack(alignment: .center, spacing: 0) {
    // 文本区域：固定在左侧，不受右侧按钮影响
    VStack(alignment: .leading) {
        Text("Enter")
            .font(Font.custom("Staatliches-Regular", size: 30))
            .foregroundColor(Color.white)
            .kerning(7.2)
        
        Text("Your")
             .font(Font.custom("Staatliches-Regular", size: 30))
             .foregroundColor(Color.white)
             .kerning(7.2)
             
        Text("Birthday")
             .font(Font.custom("Staatliches-Regular", size: 30))
             .foregroundColor(Color.white)
             .kerning(7.2)
    }
    .padding(.leading, 50) // 用正padding控制左侧间距，替代负padding
    .padding(.bottom, 100)
    
    // 用Spacer把按钮推到最右侧
    Spacer()
    
    // 按钮区域：仅在条件满足时显示，不影响文本位置
    if !day.isEmpty && !month.isEmpty && !year.isEmpty {
        Button(action: {
            // 点击事件逻辑
        }) {
            Image(systemName: "arrow.right.circle.fill")
                .resizable()
                .frame(width: 50, height: 50)
                .foregroundColor(Color.white)
        }
        .padding(.trailing, 50) // 控制按钮右侧间距
    }
}

关键修复点： #

• 移除了.padding(.leading, -180)，改用正的.padding(.leading, 50)控制文本与屏幕左侧的距离，布局更稳定。
• 用单个Spacer()把按钮推到HStack最右侧，文本区域和按钮区域的空间相互独立，按钮显示/隐藏时不会影响文本位置。
• 给按钮添加.padding(.trailing, 50)，避免按钮贴在屏幕边缘，保持视觉美观。

如果需要调整文本的左右位置，只需修改padding(.leading)的数值即可，完全不需要依赖负padding这种不稳定的布局方式。

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