SwiftUI RectangularFullView - Aligning nested Stacks

Question

I'm building a personal apple watch app, and I've just wrapped my head around complications. I've managed to get mine to display with the proper data, but the View is not aligning on the screen as I would like it.

The stacks are aligning in the center with dynamic widths. The text is also centre aligned. I tried editing the text with .multilineTextAlignment but that didn't change anything.

I have mocked up the expected alignment below:

The red box is a HStack with an image that is always 60x56 pixels. I want this to be left aligned, which seems to be working so far. I also want it to be centered vertically in the view, but I'm not sure if it is even possible.

The pink box is a VStack of text. This text should be left aligned, but I can't get that to work.

The blue box is the encompassing HStack

Here is my code for this complication (I've just realized I've given the template code with images of a real example, but it should be understandable):

struct ComplicationViewTemplate: View {

var body: some View {
    HStack {
        HStack {
            Image("0i")
                .aspectRatio(contentMode: .fit)
        }.frame(width: 60, height: 56, alignment: .leading)
        VStack {
            Text("Egg")
                    .font(.body)
                    .bold()
                Text("0 steps")
                    .font(.caption)
                Text("Level 01")
                    .font(.caption)
        }
    }
}
}

If it helps, since this app is only for me, it's only ever going to be on a Series 5 44mm watch, so items wouldn't have to be dynamic for other watch sizes.

Summary of questions:

Is it possible to vertically centre a HStack inside another HStack
Is it possible to left-align text inside of a VStack

Thanks for any help!

Don't forget `Spacer`. For the outer HStack it looks like [Spacer, Image, Text]. The alignment should default to .center, but you can fine-tune the relationships with `.alignmentGuide`. — Cenk Bilgen, Apr 08 '21 at 15:58
Thanks @CenkBilgen, I didn't know `Spacer` existed. Hopefully if everything defaults to .center it might vertically align everything as well. Would you know if there is apple documentation that lists all the elements I can put in a view? I'm having a lot of trouble finding a resource about the elements in a View — impo, Apr 09 '21 at 00:23

score 0 · Accepted Answer · answered Apr 09 '21 at 09:53

I've managed to get this to work:

struct ComplicationViewTemplate: View {
    var body: some View {
        HStack {
            HStack {
                Image("14gi")
                    .interpolation(.none)
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 60, height: 56, alignment: .leading)
            }.frame(width: 60, height: 56, alignment: .leading)
            Spacer(minLength: 10)
            VStack(alignment: .leading) {
                Text("Pikachu").bold().font(.body).alignmentGuide(.leading, computeValue: { d in d[.leading]
                })
                Text("000000 steps").font(.caption).alignmentGuide(.leading, computeValue: { d in d[.leading]
                })
                Text("Level 00").font(.caption).alignmentGuide(.leading, computeValue: { d in d[.leading]
                })
            }.frame(width: 110, alignment: .leading)
        }
    }
}

Here's what the result looks like (I've also updated the template slightly):

SwiftUI RectangularFullView - Aligning nested Stacks

1 Answers1