Today I will share with you how to add visual effects like borders, transparency, and shadows to Image views.

Knowledge points:

• First, add an Image view.

• Loads an image from the project with the specified name.

• Then, add a red border to the Image view with a default width of 1.

Image("podnu")
    .border(.red)

Visual effects:

• Next, add another Image view and set the width of the border to 10

Image("podnu")
    .border(.red, width: 10)

Visual effects:

• Add a third Image view and set the opacity of the image view to 0.5, which means that the image is semi-transparent.

Image("podnu")
    .opacity(0.5)

Visual effects:

• Add another Image view and give the image a shadow with a radius of 10.

Image("podnu")
    .shadow(radius: 10)

Visual effects:

• Add today's last Image view and set its shadow to the red, radius to 20, and offset 10 points horizontally and vertically.

Image("podnu")
    .shadow(color: .red, radius: 20, x: 10, y: 10)

Visual effects:

After code:

struct ContentView: View {
    
    var body: some View {
        VStack {
            Image("podnu")
                .border(.red)
            
            Image("podnu")
                .border(.red, width: 10)
            
            Image("podnu")
                .opacity(0.5)
            
            Image("podnu")
                .shadow(radius: 10)
            
            Image("podnu")
                .shadow(color: .red, radius: 20, x: 10, y: 10)
        }
    }
}

Follow me on:

(Foks) Hui Wang's LinkedIn