问题
What I would like to do is give the user the option to choose whether the widget background is an image taken from http or a gradient background.
I currently have the following note structure, but I can't get it to work.
So typeBg must have a default value, if not passed it should take the default value.
The values of image and bgColors must be optional parameters.
struct Note: Identifiable, Codable {
let title: String
let message: String
let image: String?
let bgColors: [Color?]//[String?]
let typeBg: String? = "color"
var id = UUID()
}
But I only get errors, in the struct Note:
Type 'Note' does not conform to protocol 'Decodable'
Type 'Note' does not conform to protocol 'Encodable'
What I would like to do is:
if typeBg of the Struct == 'url', then I take as value image which is a url.
if typeBg of the Struct == 'gradient', then I take as value bgColors which is an array of 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,
radius: 1.0,
x: CGFloat(4),
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()
}
}
}
}
回答1:
This took quite a while to do, because Color is not Codable, so a custom version had to be made. Here is what I got:
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)
}
}
}
}
To make Color be Codable, it is wrapped in 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)
}
}
It can then be used like so:
struct ContentView: View {
let data = Note(title: "Title", message: "Message", background: .url("https://google.com"))
//let data = Note(title: "Title", message: "Message", 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)")
}
}
}
Note: the Color you encode cannot be something like Color.red - it has to be made from the RGB components like using the Color(red:green:blue:) initializer.
For you, you could do something like this to change the background depending on entry's background:
@ViewBuilder func bg() -> some View {
switch entry.background {
case let .url(url):
NetworkImage(url: URL(string: url))
case let .gradient(colors):
LinearGradient(
gradient: Gradient(colors: colors),
startPoint: .top,
endPoint: .bottom
)
/// CAN ADD ANOTHER CASE TO `NoteBackground` ENUM FOR SOLID COLOR HERE
}
}
来源：https://stackoverflow.com/questions/64515941/swiftui-widget-background-based-on-the-value-passed-image-url-or-gradient-backgr