swift - 如何在 SwiftUI WidgetKit 占位符中自定义占位符外观？

Question

根据我的代码设置方式，当我的 Widget 在实际数据进入之前显示为占位符时，它看起来很难看，因为 Circle() 剪辑路径切断了图像占位符。

这是 SwiftUI 代码(第一个 Image View 是有问题的 View ):

var body: some View {
    VStack {
        HStack(alignment: .center, spacing: 14, content: {
            Image(model.profileIcon).resizable()
                .padding(4)
                .frame(width: 44, height: 44)
                .background(Color("LightColor"))
                .clipShape(Circle())
            VStack(alignment: .leading, spacing: 2, content: {
                Text(model.profileName)
                    .font(.system(size: 16))
                    .bold()
                Text("\(model.practiceToday) today")
                    .font(.system(size: 15)).fontWeight(.regular)
                    .foregroundColor(.gray)
                
            })
            Spacer()
        })
        
        Spacer()
        Divider()
        Spacer()
        
        HStack(alignment: .center, spacing: 10, content: {
            ForEach(0..<7) { i in
                SimpleProgressCircle(
                    progress: CGFloat(model.progress[i]),
                    day: model.weekdays[i],
                    today: i == 6)
            }
        })
        .padding(EdgeInsets(top: 0, leading: 2, bottom: 0, trailing: 2))
    }
    .padding(
        EdgeInsets(top: 17, leading: 15, bottom: 20, trailing: 15))
    .background(Color.foreground)
}

以及主 WidgetKit 文件中的占位符函数:

func placeholder(in context: Context) -> WidgetContent {
    return WidgetContent(
        profileID: "",
        profileName: "----",
        profileIcon: "",
        weekdays: ["","","","","","",""],
        progress: [0,0,0,0,0,0,0],
        practiceToday: "--"
    )
}

理想结果:占位符看起来像一个圆圈，没有内部矩形

Answer 1

一种解决方案是声明:

@Environment(\.redactionReasons) private var reasons

然后像这样使用它:

    if reasons.isEmpty { //Your regular view
      Image("fallback").resizable()
        .padding(4)
        .frame(width: 44, height: 44)
        .background(Color.gray)
        .clipShape(Circle())
    } else { //Example of placeholder
      Image("fallback").resizable()
        //.padding(4)
        .frame(width: 44, height: 44)
        .background(Color.gray)
        .clipShape(Circle())
    }

或者这会做

Image("fallback").resizable()
    .padding(reasons.isEmpty ? 4: 0)