Xcode Preview预览效果与Simulator模拟器显示不一致问题咨询

导致布局偏差的核心原因如下： #

• 硬编码固定尺寸
  代码里大量使用固定数值定义视图大小和坐标，比如顶部渐变Path直接写死了x=500、y=80、y=180的坐标值，TextField固定宽度290、提交按钮固定宽度315，这些数值只适配你Xcode Preview预览的那台设备的屏幕尺寸，换其他尺寸的模拟器运行时，固定值和实际屏幕宽高不匹配，就会出现错位、显示位置偏移的问题。
• 父容器对齐规则缺失
  CreateView的最外层是ZStack，你没有给内部的表单VStack添加明确的水平对齐规则，屏幕尺寸变化后，固定宽度的控件相对位置就会发生偏移。另外顶部Path的绘制完全依赖固定坐标，没有做自适应屏幕宽度的适配，不同屏幕宽度下渐变形状会和预览效果不一致。
• 预览与模拟器设备不一致
  你Xcode Preview选择的设备和运行时的模拟器设备型号不同，比如Preview用的是iPhone 14，模拟器跑的是iPhone SE或者iPad，不同设备的屏幕宽高比、安全区域高度都不一样，硬编码的布局自然会出现偏差。
• 其他潜在兼容问题
  如果模拟器运行的系统版本和Preview预设的系统版本不一致，比如Preview用的是iOS15，模拟器跑的是iOS16+，NavigationView在iOS16以后已经被标记为废弃，默认渲染行为会有变化，也可能导致布局偏移。另外要确认你使用的Poppins自定义字体已经正确加入项目配置，字体加载失败的话，文本宽高计算错误也会导致布局错位。

对应修复方案： #

1. 所有硬编码的尺寸改为相对屏幕尺寸计算，比如用UIScreen.main.bounds.width获取屏幕宽度，按比例换算控件宽度，不要写死290、315这类固定值。
2. 顶部的渐变Path不要用固定坐标绘制，改为通过GeometryReader获取父容器的实际尺寸，再基于这个尺寸动态计算路径坐标。
3. 给ZStack内的控件添加明确的对齐规则，比如表单VStack可以添加.frame(maxWidth: .infinity, alignment: .leading)，保证在不同宽度的屏幕下都靠左对齐。
4. 统一Preview和模拟器的测试设备，同时在Preview里添加多机型的预览配置，提前发现适配问题。
5. 如果要兼容iOS16及以上系统，建议把NavigationView替换为NavigationStack，避免系统控件的默认行为变化导致的布局异常。

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