How to Position Views in SwiftUI

Sometimes you want to position your views precisely within a SwiftUI layout.

How to place your view on a specific coordinate

You can use the position modifier to place a view at a specific point within its parent.

import Swift

struct ContentView: View {
    var body: some View {
        Circle()
            .fill(Color.blue)
            .frame(width: 100, height: 100)
            .position(x: 100, y: 100)
    }
}

Caveats

Using the position modifier can lead to unexpected layouts, especially with dynamic content. It's often better to use alignment guides or other layout tools provided by SwiftUI.

Wrap up

In this guide, we've covered how to position views in SwiftUI using the position modifier. While it's a powerful tool, be mindful of its caveats and consider alternative layout strategies when necessary.

Resources:

• https://developer.apple.com/documentation/swiftui

• https://developer.apple.com/documentation/swiftui/view/position(x:y:)

Read more

• Thermal States on iOS • 3 minutes reading time.
• Contextmenu • 3 minutes reading time.
• MacOS Terminal Commands • 7 minutes reading time.

Share