Swiftui：从 JSON 中获取动态颜色渐变？

Posted 2023-02-24

【中文标题】Swiftui：从 JSON 中获取动态颜色渐变？

【英文标题】：Swiftui: Fetch Dynamic Color Gradient from JSON?

【发布时间】：2021-01-11 14:17:13

【问题描述】：

对于数组中的每个项目，我想加载 JSON 中定义的动态颜色渐变。每个项目都有不同的颜色。

在 JSON 中，我将十六进制值存储在 [String] 中。我可以使用这些从这里的扩展加载颜色（十六进制：字符串）：Use Hex color in SwiftUI

我想按照以下思路来实现，但是 Xcode 会抛出各种错误，而且感觉就像是 hack。我错过了什么？

示例模型：

struct Item: Codable, Identifiable, Hashable 
    let colors: [String]

示例详细视图：

struct DetailView: View 

    let item: Item
    let gradientColors: [Color]

    init(item: Item)
        self.item = item
        ForEach(item.colors)  color in
            gradientColors.append(Color(hex: color))
        
    

    var body: some View 
        Circle()
            .background(LinearGradient(gradient: Gradient(colors: gradientColors), startPoint: .leading, endPoint: .trailing))
    

【参考方案1】：

在 SwiftUI 中，ForEach 是一个视图，可让您传递数据视图的集合，类似于 UIKit 中 UIView 的子视图。所以你不能在 init 方法中使用它。了解更多（https://developer.apple.com/documentation/swiftui/foreach）

代码的正确使用：

struct Item: Codable, Identifiable 
    var id = UUID()
    let colors: [String]


struct ContentView: View 
    let item: Item
    
    init(item: Item)
        self.item = item
    
    
    var body: some View 
        Circle()
            .fill(LinearGradient(gradient: Gradient(colors: item.colors.mapColor(hex: $0)), startPoint: .leading, endPoint: .trailing))
    

如果你想使用forEach来迭代你的数组，你需要使用和老方法一样的方法。

例子：

struct ContentView: View 
    let item: Item
    
    var gradientColors: [Color] = []
    
    init(item: Item)
        self.item = item
        item.colors.forEach  (strColor) in
            gradientColors.append(Color(hex: strColor))
        
    
    
    var body: some View 
        Circle()
            .fill(LinearGradient(gradient: Gradient(colors: gradientColors), startPoint: .leading, endPoint: .trailing))
    

另外，还有一件事。如果您尝试向圆圈添加渐变，则不适用于.background(LinearGradient。为此，您需要使用.fill

var body: some View 
        Circle()
            .fill(LinearGradient(gradient: Gradient(colors: gradientColors), startPoint: .leading, endPoint: .trailing))
    

【讨论】：

啊哈！ .map 再次拯救了这一天。非常感谢你！我正在尝试让颜色可选，并通过首先检查颜色是否为 != nil 来解决它，然后在渐变修饰符中强制展开它们。我知道我应该避免强制解包（尽管在这种情况下它在 if 语句中，只有在值不为零时才执行），所以也许有一个更优雅的解决方案？

你说的是颜色数组吗？

是的，在我的实际项目中，从 JSON 解码的数据是可选的。因此，采用您的解决方案，我不得不采取额外的步骤并打开它