Apply modifier to Image like in AsyncImage

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?

1 answer

  • answered 2021-10-24 15:28 EmilioPelaez

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

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum