SwiftUI Widget背景基于值传递的图像URL或渐变背景

如何解决SwiftUI Widget背景基于值传递的图像URL或渐变背景

我想给用户的选项是选择widget background是从http还是gradient background拍摄的图像。

我目前具有以下注释结构，但无法正常工作。

因此typeBg必须具有默认值，如果未传递，则应采用默认值。

image和bgColors的值必须是可选参数。

struct Note: Identifiable,Codable {
    let title: String
    let message: String
    let image: String?
    let bgColors: [Color?]//[String?]
    let typeBg: String? = "color"
    
    var id = UUID()
}

但是在结构中，我只得到错误提示：

类型“注释”不符合协议“可解码”

类型“注释”不符合协议“可编码”

我想做的是：

如果结构的typeBg == 'url'，那么我将值image视为url。

如果结构的typeBg == 'gradient'，那么我将值bgColors视为一个Color数组。

ContentView：

SmallWidget(entry: Note(title: "Title",message: "Mex",bgColors: bgColors,typeBg: "gradient"))

SmallWidget：

struct SmallWidget: View {
    var entry: Note
    @Environment(\.colorScheme) var colorScheme
    
    
    func bg() -> AnyView { //<- No work
        switch entry.typeBg {
        case "url":
            return AnyView(NetworkImage(url: URL(string: entry.image))
        case "gradient":
            return AnyView(
                LinearGradient(
                    gradient: Gradient(colors: entry.bgColors),startPoint: .top,endPoint: .bottom)
            )
        default:
            return AnyView(Color.blue)
        }
        
        var body: some View {
            GeometryReader { geo in
                VStack(alignment: .center){
                    Text(entry.title)
                        .font(.title)
                        .bold()
                        .minimumScaleFactor(0.5)
                        .foregroundColor(.white)
                        .shadow(
                            color: Color.black,radius: 1.0,x: CGFloat(4),y: CGFloat(4))
                    Text(entry.message)
                        .foregroundColor(Color.gray)
                        .shadow(
                            color: Color.black,y: CGFloat(4))
                    
                }
                .frame(maxWidth: .infinity,maxHeight: .infinity)
                .edgesIgnoringSafeArea(.all)
            }
            .background(bg)
            //.background(gradient)
            //.background(NetworkImage(url: URL(string: entry.image)))
        }
    }

struct NetworkImage: View {
    
    public let url: URL?
    
    var body: some View {
        Group {
            if let url = url,let imageData = try? Data(contentsOf: url),let uiImage = UIImage(data: imageData) {
                
                Image(uiImage: uiImage)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
            }
            else {
                ProgressView()
            }
        }
        
    }
}

解决方法

这花了相当长的时间，因为Color不是Codable，因此必须创建自定义版本。这是我得到的：

struct Note: Identifiable,Codable {
    
    enum CodingKeys: CodingKey {
        case title,message,background
    }
    
    let id = UUID()
    let title: String
    let message: String
    let background: NoteBackground
}


extension Note {
    
    enum NoteBackground: Codable {
        
        enum NoteBackgroundError: Error {
            case failedToDecode
        }
        
        case url(String)
        case gradient([Color])
        
        init(from decoder: Decoder) throws {
            let container = try decoder.singleValueContainer()
            
            if let url = try? container.decode(String.self) {
                self = .url(url)
                return
            }
            if let gradient = try? container.decode([ColorWrapper].self) {
                self = .gradient(gradient.map(\.color))
                return
            }
            
            throw NoteBackgroundError.failedToDecode
        }
        
        func encode(to encoder: Encoder) throws {
            var container = encoder.singleValueContainer()
            
            switch self {
            case let .url(url):
                try container.encode(url)
            case let .gradient(gradient):
                let colors = gradient.map(ColorWrapper.init(color:))
                try container.encode(colors)
            }
        }
    }
}

为使Color成为Codable，将其包装在ColorWrapper中：

enum ColorConvert {
    
    struct Components: Codable {
        let red: Double
        let green: Double
        let blue: Double
        let opacity: Double
    }
    
    static func toColor(from components: Components) -> Color {
        Color(
            red: components.red,green: components.green,blue: components.blue,opacity: components.opacity
        )
    }
    
    static func toComponents(from color: Color) -> Components? {
        guard let components = color.cgColor?.components else { return nil }
        guard components.count == 4 else { return nil }
        let converted = components.map(Double.init)
        
        return Components(
            red: converted[0],green: converted[1],blue: converted[2],opacity: converted[3]
        )
    }
}


struct ColorWrapper: Codable {
    
    let color: Color
    
    init(color: Color) {
        self.color = color
    }
    
    init(from decoder: Decoder) throws {
        let container = try decoder.singleValueContainer()
        let components = try container.decode(ColorConvert.Components.self)
        color = ColorConvert.toColor(from: components)
    }
    
    func encode(to encoder: Encoder) throws {
        var container = encoder.singleValueContainer()
        let components = ColorConvert.toComponents(from: color)
        try container.encode(components)
    }
}

然后可以像这样使用它：

struct ContentView: View {
    
    let data = Note(title: "Title",message: "Message",background: .url("https://google.com"))
    //let data = Note(title: "Title",background: .gradient([Color(red: 1,green: 0.5,blue: 0.2),Color(red: 0.3,green: 0.7,blue: 0.8)]))
    
    var body: some View {
        Text(String(describing: data))
            .onAppear(perform: test)
    }
    
    private func test() {
        do {
            let encodedData = try JSONEncoder().encode(data)
            print("encoded",encodedData.base64EncodedString())
        
            let decodedData = try JSONDecoder().decode(Note.self,from: encodedData)
            print("decoded",String(describing: decodedData))
        } catch let error {
            fatalError("Error: \(error.localizedDescription)")
        }
    }
}

注意：您编码的Color 不能类似于Color.red-它必须由RGB组件制成，就像使用Color(red:green:blue:)初始化程序一样。 / p>

对于您来说，您可以根据entry的{​​{1}}来执行以下操作来更改背景：

background