swift - 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
是 Struct == 'url'
,那么我将image
其作为 url 的值。
如果typeBg
是 Struct == 'gradient'
,那么我将bgColors
其作为颜色数组的值。
内容视图:
SmallWidget(entry: Note(title: "Title", message: "Mex", bgColors: bgColors, typeBg: "gradient"))
小部件:
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()
}
}
}
}
解决方案
这花了很长时间才完成,因为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", 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)")
}
}
}
注意:Color
您编码的内容不能像Color.red
- 它必须由 RGB 组件组成,例如使用Color(red:green:blue:)
初始化程序。
对你来说,你可以做这样的事情来根据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
}
}
推荐阅读
- python - 我的 Django 登录/注册表单保存了除金额之外的所有内容
- java - 如何在 Spring Boot 中使用 JPA 从数据库中获取特定列(尝试从数据库中获取特定列时出现异常)?
- opentbs - 我可以使用 TinyButStrong 字段来控制 Word 表中的段落格式吗
- javascript - Angular 7 - *ngFor 没有正确迭代并且没有考虑解构对象
- sql-server - 免费试用后 Azure SQL Server 登录失败
- r - R ggplot boxplot 通过组合因素进行分组
- python - Python dict - 如何将变量设置为值?
- python - 使用 Selenium(Python) 将 Youtube 质量降低到 144p
- javascript - 如何使用 Fuse.js 过滤 vuetify v-autocomplete 组件中的数据?
- php - 使用服务帐户和 PHP 上传 Google 驱动器文件