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

Question

For every item in an array, I want to load a dynamic gradient of colors that are defined in the JSON. There are different colors in each item.

In the JSON, I'm storing hex values in [String]. I can use these to load Color(hex: String) using the extension from here: Use Hex color in SwiftUI

I was thinking along the following lines for implementation, but Xcode throws all sorts of errors and besides, it feels like a hack. What am I missing?

Example model:

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

Example Detailview:

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))
    }
}

Answer 1

In SwiftUI ForEach is a view that lets you pass a collection of data views similar to the subview of UIView in UIKit. so you can not use it inside the init method. For more ( https://developer.apple.com/documentation/swiftui/foreach )

The correct use of code:

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.map{Color(hex: $0)}), startPoint: .leading, endPoint: .trailing))
    }
}

If you want to iterate your array by using forEach , you need to use the same as the old way.

Example:

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))
    }
}

Also, one more thing. If you try to add a gradient to the circle, it's not work with .background(LinearGradient . For this you need to use .fill

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