SwiftUI VStack align right single element

Question

I'm new at SwiftUI, I'm trying this time to align right a single element (an image) to the right and then the rest of the content should be center aligned.

Just like what happens when you use Spacer() on an HStack but to the other side.

I read about .alignmentGuide and it was a little bit confusing but I tried using it this way:

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                Text("Hello!").alignmentGuide(.trailing) {
                    v in v[HorizontalAlignment.trailing]
                }
            }
            Text("Hello, World!")
            Spacer()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

But this makes no change at all, both Text are center aligned.

I tried moving the .alignmentGuide code after the } of the HStack with the same result.

This is what I'm trying to do, before with storyboards I'd use some constraints to do this, like setting the right constraint to 8 or something, but I'm a bit lost when it comes to doing it the SwiftUI way.

score 20 · Accepted Answer · answered Aug 18 '20 at 01:37

20

Here's one way to do it:

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                Spacer()
                Text("Hello!")
                    .padding(.trailing, 8)
            }
            Text("Hello, World!")
            Spacer()
        }
    }
}

Use an HStack with a Spacer() to push Text("Hello!") to the right. Add .padding(.trailing, 8) to keep it 8 points off the right edge.

answered Aug 18 '20 at 01:37

vacawama

150,663
30
266
294

3

Is this really the recommended way to do that? Sounds very verbose for something so basic as `align-self: flex-end`. – Jonas Sourlier Mar 20 '22 at 21:15
You're right, I don't think it's recommended. See [my answer](https://stackoverflow.com/a/72944281/10967642) for more explanation. – Rémi B. Jul 11 '22 at 20:26

score 9 · Answer 2 · answered Jul 11 '22 at 20:25

To answer to @cheesus, I would say @vacawama's answer is not the recommended way of doing it.

Here is how I would do it

VStack {
  Text("Hello!")
    .frame(maxWidth: .infinity, alignment: .trailing)
    .padding(.trailing, 8)
  Text("Hello, World!")
}
.frame(maxHeight: .infinity, alignment: .top)

To elaborate a bit more

The main problem with using (H|V)Stacks and Spacers is that you get a fixed spacing between your content and the Spacer, and in some cases it might cause issues.

An example

Consider we want a HStack, some spacing between elements and the last text aligned to the left:

HStack(spacing: 25) {
  Color.red
    .frame(width: 50, height: 20)
  Color.green
    .frame(width: 50, height: 20)
  Text("The text")
    .background(Color.blue)
  Spacer()
}
.frame(width: 250)
.border(Color.yellow)
.padding(8)

It gives:

If the text becomes longer, you see the HStack spacing between the spacer:
```
- Text("The text")
+ Text("Some long text")
```

Now I just replaced the Spacer with a Color so you can see it in action:

- Text("Some long text")
-   .background(Color.blue)
- Spacer()
+ Text("Some long text")
+   .background(Color.blue)
+   .layoutPriority(1)
+ Color.indigo
+   .frame(height: 20)
+   .frame(maxWidth: .infinity)

This is fixed if you use .frame(alignment:):

HStack(spacing: 25) {
  Color.red
    .frame(width: 50, height: 20)
  Color.green
    .frame(width: 50, height: 20)
  Text("Some long text")
    .frame(maxWidth: .infinity, alignment: .leading)
    .background(Color.blue)
}
.frame(width: 250)
.border(Color.yellow)
.padding(8)

This seems to be better than the accepted answer – eharo2 Mar 09 '23 at 23:54 — eharo2, Mar 09 '23 at 23:54

SwiftUI VStack align right single element

2 Answers2

Here is how I would do it

To elaborate a bit more

An example