Home > database >  Apply modifier to Image like in AsyncImage
Apply modifier to Image like in AsyncImage

Time:10-25

my goal is to have a custom AsyncImage View because I need to authenticate my request. Therefore I have created a custom struct which implements this. Now my only problem is that I want to add modifiers to my loaded Image.

Something like this:

CustomAsyncImageView(dataKey: dataKey) { image in    
     image
        .resizable()                
} placeholder: {
     Rectangle()
}

What I tried:

struct CustomAsyncImageView<Content> : View where Content : View {
    
    var content: Content
    
    var image: Image?
    
    // I left out the Image loading
    
    public init<I, P>(dataKey: String, @ViewBuilder content: @escaping (Image) -> I, @ViewBuilder placeholder: @escaping () -> P)  {
        // I have this init from AsyncImage, but I have no idea how to initialize my properties
    }

    var body: some View {
        if let image = image {
            image
        } else {
            // show placeholder
        }
    }
}

Is this type of initialization possible to implement or should I pass the viewModifier as a parameter?

CodePudding user response:

You're not too far off. You would have to store the content closure, as well as the placeholder closure, and execute them in your body.

I also don't believe you need the @ViewBuilder attribute.

struct CustomAsyncImageView<I, P>: View where I: View, P: View {
    let content: (Image) -> I
    let placeholder: () -> P
    var image: Image?
    
    public init(dataKey: String, content: @escaping (Image) -> I, placeholder: @escaping () -> P)  {
        self.content = content
        self.placeholder = placeholder
    }

    var body: some View {
        if let image = image {
            content(image)
        } else {
            placeholder()
        }
    }
}
  • Related