问题描述
我想给用户的选项是选择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