SwiftUI coordinate space

Question

Does anyone know how does SwiftUI render in terms of coordinate space? It doesn't look like the frame's origin is now at the 0, 0 in the left top corner. For example adding a Text with a modifier would offset the label outside of a view.

var body: some View {
    Text("my long enough string")
      .position(CGPoint(x: 0, y: 100))
}

The result is I can only see "ugh string".

score 9 · Answer 1 · answered Jun 06 '19 at 15:16

.position(x, y) will position the center of the view to the specified coordinate with the parent.

You will need to use a Stacks/Container to position the displayed elements relative to each other using aligments and spacer.

Views always start out at the center of the screen.

Something like this:

   HStack(alignment: .top) {
        VStack(alignment: .leading) {
            Text("top left")
            Spacer()
            Text("bottom left")
        }

        Spacer()
        VStack(alignment: .leading) {
            Text("top right")
            Spacer()
            Text("bottom right")
        }
    }

score 2 · Answer 2 · answered Jun 05 '19 at 00:08

2

You can use 'padding' instead of position.

Text("Hello World").padding(EdgeInsets.init(top: 100, leading: 0, bottom: 0, trailing: 0))

answered Jun 05 '19 at 00:08

Markicevic

1,025
9
20

1

That would also inset the background color – Lucas van Dongen Jun 05 '19 at 05:55

score 2 · Answer 3 · edited Dec 20 '19 at 23:36

2

According to the documentation of the function position(x:y:):

x: The x-coordinate at which to place the center of this view.
y: The y-coordinate at which to place the center of this view.

This will fix the center of your text at center of the superview.

You can also use the padding() function:

Text("my long enough string").padding(.top, 20)

edited Dec 20 '19 at 23:36

Ky -

30,724
51
192
308

answered Jun 19 '19 at 05:40

Rohit Makwana

4,337
1
21
29

score 1 · Answer 4 · answered Jun 04 '19 at 18:41

1

The coordinate space on iOS has 0, 0 in the top-left corner. Your text is being truncated because the position attribute: “Fixes the center of this view at the specified point in its parent’s coordinate space.”

answered Jun 04 '19 at 18:41

marcprux

9,845
3
55
72

2

So how would you position the view at `(0, 100)`? – LinusGeffarth Jun 04 '19 at 22:37

score 0 · Answer 5 · answered Mar 11 '20 at 00:57

0

You can also use the .offset modifier to offset the view with respect to the top left corner. If you use it just be aware that the effects can be drastically different based on the ordering of the modifiers.

answered Mar 11 '20 at 00:57

Helam

1,385
13
17

score 0 · Answer 6 · answered Jun 01 '21 at 06:43

0

Fixes the center of this view at the specified point in its parent’s coordinate space.

answered Jun 01 '21 at 06:43

guoliang li

91
1
3

SwiftUI coordinate space

6 Answers6

Linked