记一次SwiftUI奇怪的离屏渲染事件

 VStack {
	Image("\(list["imageNamed"]!)")
  		.resizable()
 	 	.aspectRatio(contentMode: .fit)
  		.frame(width: 60, height: 60)
 		.padding(.vertical, 24)
	Text("\(list["title"]!)")
  		.font(.headline)
 }
  .frame(width: (kScreen_width - 30 * 4) / 2, height: (kScreen_height - headHeight - 30 * 7) / 2)
  .background(
	RoundedRectangle(cornerRadius: 16)
    	.fill(.white)
   	 	.shadow(color: .black.opacity(0.1), radius: 10, y: 10)
    	.shadow(color: .black.opacity(0.1), radius: 10, y: -2)
 )

先看下我原来的代码 视图比较简单 然后添加一个圆角 然后一次我打开视图检查器 发现告警

The layer is using dynamic shadows which are expensive to render. If possible try setting `shadowPath`, or pre-rendering the shadow into an image and putting it under the layer.

因为有四条提示 正好跟我此处控件数一致 立马判断是此处的问题 仔细的看了下提示的问题 这不正是典型的离屏渲染问题吗 因为对swiftui不熟 也无法调用.shadowPath方法进行圆角的绘制 后面搜索发现了有人说 可以用 .drawingGroup() 强制调用GPU进行渲染但是我试过很多次 都还是不行 最后放弃了

后面试了下 下面的这个方法 总算是解决了问题

.background(
   Rectangle()
    .fill(.white)
    .cornerRadius(16) // 设置圆角半径
    .shadow(color: .black.opacity(0.1), radius: 10, y: 10)
    .shadow(color: .black.opacity(0.1), radius: 10, y: -2)
 )

其实这个方法你跟上面的方法不同的地方是一个先设置圆角 然后设置背景 这就导致圆角四周被切割的离屏了 如果是先设置背景 再进行圆角切割 则可以把四周不需要的部分给切割掉 这样就不会导致离屏渲染了 这里记录一下 希望能帮助遇到的人