SwiftUI 二级NavigationView中使用渐变描边的Path出现像素化问题

这个问题是SwiftUI导航栈转场动画的预渲染快照优化bug导致的。当视图通过NavigationLink推入时，系统会提前对目标视图做快照缓存用于转场动画，固定高度的渐变描边Shape在这个阶段拿到的画布分辨率参数异常，被压低到非Retina级别，最终渲染就出现明显的像素锯齿。

最优解决方案（无额外状态、无延迟） #

只需要给绘制渐变描边的视图添加.drawingGroup()修饰符即可，该修饰符会触发Metal加速的离屏渲染，绕过系统的低分辨率快照逻辑，性能损耗几乎可以忽略：

GeometryReader { proxy in
    LinePath(width: proxy.size.width, height: proxy.size.height)
        .stroke(gradient, lineWidth: 3)
}
.frame(height:200)
.padding()
.drawingGroup() // 新增这一行即可

替代方案：显式开启抗锯齿配置 #

如果不想用离屏渲染，可以给描边添加完整的StrokeStyle配置，同时显式开启抗锯齿：

GeometryReader { proxy in
    LinePath(width: proxy.size.width, height: proxy.size.height)
        .stroke(gradient, style: StrokeStyle(lineWidth: 3, lineCap: .round, lineJoin: .round))
        .antialiased(true)
}
.frame(height:200)
.padding()

相关说明 #

• 你用到的延迟修改高度触发重绘的临时方案，本质是等转场动画结束、系统丢弃预渲染快照后，强制视图重新计算渲染，此时会用正常的Retina分辨率绘制。但该方案存在偶发失效风险：当设备性能不足、转场动画时长超过你设置的0.01秒时，依然会出现像素化问题，不推荐在生产环境使用。
• 你备注的两个现象和bug的触发逻辑完全吻合：
  • 不设置固定.frame(height:200)时，系统预渲染阶段无法确定视图的准确尺寸，不会生成低分辨率快照，因此不会触发bug
  • 改用纯色描边时，系统对纯色元素的预渲染分辨率处理优先级更高，不会出现分辨率压低的问题，因此也不会触发bug

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