SwiftUI中HStack添加锁图标后按钮偏移问题求助

问题核心是布局不对称：未锁定时右侧用Spacer()占满剩余空间，锁定时换成固定尺寸的锁图标，两者宽度差异导致按钮向左偏移。

方法一：统一右侧元素宽度 #

给锁图标和未锁定状态的占位设置相同宽度，配合左右Spacer保证布局对称：

HStack() {
  Spacer()
  ZStack {
    buttonBackground(isLocked: isLocked)
    Text(level)
      .foregroundColor(isLocked ? Color.gray : Color.white)
      .frame(maxWidth: .infinity, alignment: .center)
  }
  .frame(width: screenWidth/2, height: 40)
                
  // 让右侧元素宽度一致，避免布局偏移
  if isLocked {
    Image(systemName: "lock.fill")
      .resizable()
      .foregroundColor(.gray)
      .frame(width: 30, height: 30)
  } else {
    // 用和锁图标同宽的透明占位替代Spacer
    Color.clear.frame(width: 30)
  }
  Spacer()
}

方法二：将按钮与锁图标作为整体居中 #

把按钮和锁图标包装在子HStack里，外层用Spacer让这个整体居中：

HStack(alignment: .center) {
  Spacer()
  HStack(spacing: 8) { // 可调整间距控制按钮和锁的距离
    ZStack {
      buttonBackground(isLocked: isLocked)
      Text(level)
        .foregroundColor(isLocked ? Color.gray : Color.white)
        .frame(maxWidth: .infinity, alignment: .center)
    }
    .frame(width: screenWidth/2, height: 40)
                    
    if isLocked {
      Image(systemName: "lock.fill")
        .resizable()
        .foregroundColor(.gray)
        .frame(width: 30, height: 30)
    }
  }
  Spacer()
}

原效果对比：

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