SwiftUI position text bottom right?

Question

Is there a better way of positioning text in SwiftUI, in the example below I am positioning the text in the bottom right corner of a ZStack, it works fine but seems long winded, am I missing a simpler way ... The orange lines are just for debugging, so that the spacers are visible in the view.

CODE

struct DisplayTwoView: View {
    var body: some View {
        ZStack {
            Rectangle().foregroundColor(.blue)
            Group {
                VStack {
                    Spacer().frame(width: 5).background(Color.orange)
                    HStack {
                        Spacer().frame(height: 5).background(Color.orange)
                        Text("RABBITS").fontWeight(.black)
                    }
                }
            }.padding()
        }
    }
}

VIEW

score 21 · Accepted Answer · edited Aug 23 '22 at 07:12

21

Try this one (tested with Xcode 11.4 / iOS 13.4)

struct DisplayTwoView: View {
    var body: some View {
        ZStack(alignment: .bottomTrailing) {
            Rectangle().foregroundColor(.blue)
            Text("RABBITS").fontWeight(.black)
                .padding()
        }
    }
}

edited Aug 23 '22 at 07:12

Martijn Pieters

1,048,767
296
4,058
3,343

answered Apr 02 '20 at 12:32

Asperi

228,894
20
464
690

Thats a good option, yup I had overlooked the fact that you could align the stack. – fuzzygoat Apr 02 '20 at 14:42
Is there a way to align only a single object inside the contents of the ZStack? – Zorayr Jun 06 '20 at 00:23
Have same question like @Zorayr – Emil Sabitov Jun 13 '20 at 15:22
Checkout alignmentGuides, https://www.hackingwithswift.com/books/ios-swiftui/alignment-and-alignment-guides. Been a bit of time, but pretty sure they worked for me. – Zorayr Jun 14 '20 at 19:05

score 3 · Answer 2 · answered Jul 05 '22 at 19:44

3

Another way is via the .frame modifier, like this:

ZStack {
    Text("RABBITS")
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomTrailing)
}

answered Jul 05 '22 at 19:44

Xtian D.

434
5
5

SwiftUI position text bottom right?

2 Answers2