CODEWITHSUNDEEP
iosswiftswiftui
Pondorasti
Pondorasti

Reputation: 627

SwiftUI custom Image Modifier

I am trying to create a custom image modifier that uses the resizable() function, therefore my content should be an Image. At least, that what I think so.

Error Message: Type 'IconModifier' does not conform to protocol 'ViewModifier'

struct IconModifier: ViewModifier {
    func body(content: Image) -> some View {
        content
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 10, height: 10, alignment: .center)
    }
}

Upvotes: 12

Views: 4369

Answers (1)

George
George

Reputation: 30361

Solution

You can just extend Image instead.

Used like so:

struct ContentView: View {

    var body: some View {
        VStack {
            Text("Hello World!")
            
            Image("someName")
                .imageIconModifier()
        }
    }
}

Image extension:

extension Image {
    
    func imageIconModifier() -> some View {
        self
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 10, height: 10, alignment: .center)
    }
}

Why your solution wouldn't work

You first got the error:

Type 'IconModifier' does not conform to protocol 'ViewModifier'

This means that your IconModifier did not satisfy the requirements for the ViewModifier protocol, which if we see the definition:

func body(content: Self.Content) -> Self.Body

whereas you had:

func body(content: Image) -> Self.Body

which doesn't work. So next - we will change that to Content rather than Image:

Value of type 'IconModifier.Content' (aka '_ViewModifier_Content') has no member 'resizable'

This is basically saying that there is no .resizable() modifier for any View. The .resizable() modifier is inside defined inside only extension Image, and so no other View has this modifier.

And that is the core problem - the can't access the original View (Image for what we want) through the content parameter in a ViewModifier.

This is why I just made an extension for Image.

Hope this explanation helps!

Upvotes: 29

Related Questions