[英]SwiftUI Path is pixelated when in second Navigation View
I have a strange behavior on my SwiftUI app.我的 SwiftUI 应用程序有一个奇怪的行为。 I draw a Path
with a linear gradient as stroke color.我绘制了一个带有线性渐变的Path
作为描边颜色。
This path is displayed like this in my view:这个路径在我看来是这样显示的:
GeometryReader { proxy in
LinePath(width: proxy.size.width, height: proxy.size.height)
.stroke(gradient, lineWidth: 3)
}
.frame(height:200)
.padding()
( LinePath
struct extends Shape
and draw the Path
) ( LinePath
结构扩展Shape
并绘制Path
)
When this code is displayed on first view, it draws correctly:当此代码显示在第一个视图上时,它会正确绘制:
But if I display it in a second view after a NavigationLink, the drawn line is "pixelated":但是,如果我在 NavigationLink 之后的第二个视图中显示它,则绘制的线是“像素化的”:
As it may be difficult to understand and there is quite lot of code (for a web page), I did a demo project you can get here .由于它可能难以理解并且有很多代码(对于 web 页面),我做了一个演示项目,你可以在这里找到。
To test it, you can open testprojectApp.swift
and comment/uncomment parts:要对其进行测试,您可以打开testprojectApp.swift
并注释/取消注释部分:
ContentView() // <--- Uncomment this to get the issue
//SubView() // <--- Uncomment this and it works
If you call SubView
(where this LinePath
is drawn), it works.如果您调用SubView
(绘制此LinePath
的位置),它可以工作。 If you call ContentView
that will display a button to navigate to SubView
, it draws a pixelated line.如果您调用ContentView
将显示一个导航到SubView
的按钮,它会绘制一条像素化线。
Notes:笔记:
height
, it is never pixelated ( .frame(height:200)
).如果我没有设置height
,它永远不会被像素化( .frame(height:200)
)。.blue
), it is never pixelated.如果我不使用渐变而是使用简单的颜色(如.blue
),它永远不会像素化。EDIT : I've found a "workaround", to redraw the line 0.01s after it appeared and change its height.编辑:我找到了一个“解决方法”,在它出现后重绘线 0.01 秒并改变它的高度。 It visually "works" but of course it is not a good method...它在视觉上“有效”,但当然这不是一个好方法......
@State var height: CGFloat = 0
var body: some View {
GeometryReader { proxy in
LinePath(width: proxy.size.width, height: proxy.size.height)
.stroke(gradient, lineWidth: 3)
}
.frame(height:height)
.padding()
.onAppear() {
DispatchQueue.main.asyncAfter(deadline: .now() + 0.01) {
height = 200
}
}
}
You can add .drawingGroup()
and it seems to resolve the issue without having to use the delay:您可以添加.drawingGroup()
,它似乎可以解决问题而无需使用延迟:
GeometryReader { proxy in
LinePath(width: proxy.size.width, height: proxy.size.height)
.stroke(gradient, lineWidth: 3)
}
.frame(height:200)
.padding()
.drawingGroup() //<-- here
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.