How to Right Align Image in SwiftUI?

SwiftUI – Right Align Image

To right align Image in its frame, set the frame alignment of this Image to trailing edge.

The following code shows how to right align Image.

Image("image-file-name")
    .frame(maxWidth: .infinity, alignment: .trailing)

Example

In the following example, we display an Image view, and set it’s alignment to trailing edge, or in other words, right.

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack{
            Image("sunrise")
                .resizable()
                .frame(width: 100, height: 100)
                .frame(maxWidth: .infinity, alignment: .trailing)
                .padding(.all)
                .border(Color.gray.opacity(0.5))
        }
        .padding(.all)
    }
}

The first .frame() modifier is for resizing the image to 100×100. The second .frame() modifier sets the width of the Image frame to the maximum available width and aligns the Image to the trailing edge.

Screenshot

The border around the image depicts the frame of the Image, and the alignment of the Image to the right, or trailing edge.

Summary

Summarising this SwiftUI Tutorial, we learned how to right align Image in SwiftUI.