Starting from this blog, I will introduce many knowledge points related to Image view one after another.

Knowledge points:

• As you can see from the Assets folder, an image has been imported for the current project.

• Next, prepare to write code to display the image in Assets.

• The Image view is similar to UIImageView in UIKit and is mainly used for displaying image resources in the project.

• Use the image name directly here to quickly display the image.

Image("podnu")

Visual effects:

• The systemName property allows you to display SF Symbols icons with the specified name. With the specified name, over 1,500 different Apple built-in icons can be displayed.

Image(systemName: "info.circle")

Visual effects:

• If you need to modify the color of the icon, you only need to set its foregroundColor, which is the same as setting the font color.

Image(systemName: "info.circle")
    .foregroundColor(.red)

• The way to set the icon size is also the same as the way to set the text size.

Image(systemName: "info.circle")
    .font(.system(size: 100))

Visual effects:

• Next, add another Image view that demonstrates the zoom mode of the image.

• By calling the resizable method, the Image view is automatically scaled to fit its parent view.

Image("podnu")
    .resizable()

Visual effects:

• Finally, constrains the dimensions of this Image view to the specified aspect ratio. While filling the parent view, still maintain the original aspect ratio of the image.

Image("podnu")
    .resizable()
    .aspectRatio(contentMode: .fit)

Visual effects:

After code:

struct ContentView: View {
    
    @State var isPresented = false
    
    var body: some View {
        VStack {
            Image("podnu")
            
            Image(systemName: "info.circle")
                .foregroundColor(.red)
                .font(.system(size: 100))
            
            Image("podnu")
                .resizable()
                .aspectRatio(contentMode: .fit)
        }
    }
}

Follow me on:

(Foks) Hui Wang's LinkedIn