Image

Documents: developer.apple.com/documentati…

Displays a view of the image

var body: some View {
    VStack {
        Image("space11-people")}}// Image name is space11-people
Copy the code

Use SF Symbols:

var body: some View {
    VStack {
        Image(systemName: "clock.fill")}}Copy the code

You can add styles to system ICONS to match the font you use:

var body: some View {
    VStack {
        Image(systemName: "cloud.heavyrain.fill")
            .foregroundColor(.red)
            .font(.title)
            .padding()
        
        Image(systemName: "clock")
            .foregroundColor(.red)
            .font(Font.system(.largeTitle).bold())
            .padding()
    }
}
Copy the code

Adjust the size

Image views have the ability to scale in different ways, and by default, Image views automatically resize to fit their contents, which can make them out of the screen. If you add the resizable() modifier, the image will automatically resize to fill all available space:

var body: some View {
    VStack {
        Image("space11-people")
            .resizable() // Resize to fill all available space}}Copy the code

This can also cause distortion of the original aspect ratio of the image, as it will stretch any amount needed at all sizes to make it fill the space.

If you want to maintain the aspectRatio, aspectRatio should use.fill or add the modifier.fit.

Set the image to.fit:

var body: some View {
    VStack {
        Image("space11-people")
            .resizable()
            .aspectRatio(contentMode: .fit)
    }
}
Copy the code

Set the image to.fill:

var body: some View {
    VStack {
        Image("space11-people")
            .resizable()
            .aspectRatio(contentMode: .fill)
    }
}
Copy the code

If you want to customize the Image size, you can add a frame clipsToBounds (), which is equivalent to a UIKit clipsToBounds, and aspectRatio(contentMode:.fill).

var body: some View {
    VStack {
        Image("space11-people")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: 360, height: 200)
            .clipped()
    }
}
Copy the code

For more SwiftUI articles, check out our website: Image