SF Symbol替换动画尺寸异常：WiFi图标切换时缩放位移问题

问题根源 #

wifi和wifi.slash是两个独立的SF Symbol，虽然整体尺寸在SF Symbols应用中显示一致，但内部信号条的布局和大小存在差异——wifi.slash为了容纳斜杠，信号条做了缩小调整。再加上.contentTransition(.symbolEffect(.replace))的默认替换动画会触发两个符号间的缩放过渡，搭配固定frame约束后，就放大了位移和缩放的视觉bug。

最优解决方案：使用符号变体而非切换符号 #

SF Symbols支持通过.symbolVariant()给基础符号添加变体效果，这样基础WiFi信号条不会改变，只是动态添加/移除斜杠，从根源解决尺寸不一致的问题，动画也更自然。

修改后的代码：

Image(systemName: "wifi")
    .font(.system(size: 22))
    .frame(width: 24, height: 24)
    .foregroundStyle(.black)
    .symbolRenderingMode(.hierarchical)
    .symbolVariant(showSlash ? .slash : .none)
    .contentTransition(.symbolEffect(.replace))

额外优化点 #

• 如果仍存在细微对齐问题，可去掉固定frame，改用符号自身的缩放逻辑控制尺寸：

  Image(systemName: "wifi")
      .font(.system(size: 22))
      .foregroundStyle(.black)
      .symbolRenderingMode(.hierarchical)
      .symbolVariant(showSlash ? .slash : .none)
      .contentTransition(.symbolEffect(.replace))
  

• 若想让斜杠过渡更柔和，可将替换动画换成淡入淡出效果：

  .contentTransition(.symbolEffect(.fade))
  

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