How to line up bottom text for child view in VStack

Question

I have the following code which produces the following output.

    var body: some View {
        VStack(spacing: 0) {
            HStack(spacing: 0) {
                Rectangle()
                    .fill(Color.green)
                    .overlay(
                        VStack {
                            Text("11 / 11 /11 /111/1 111")
                               .font(.system(size: 100.0))
                            Text("data")
                        }
                    )
                
                Rectangle()
                    .fill(Color.red)
                    .overlay(
                        VStack {
                            Text("111 / 111")
                               .font(.system(size: 100.0))
                            Text("data 2")
                        }
                    )
            }
        }
    }

How would I get the text data to line up with the text data 2 even though the view (text) above it is a lot bigger, the text "11 / 11 /11 /111/1 111", and causing the bottom view to be pushed further down? How would I stop that from happening?

I should also mention that I don't want "11 / 11 /11 /111/1 111" to be truncated.

EDIT: It's ok if that long text has a smaller font size compared to the text below it. I've tried minimumScaleFactor too and the bottom text view is still pushed relative to the top view with long text.

Here's what I'd like to accomplish.

Do you have a variable amount of lines between the two columns, or is it a fixed amount? — Yrb, Jul 20 '21 at 00:06
Can you upload an image of what you want to accomplish? Or do you not care so long as the Bottom 2 lines are even? And does it have to be an overlay on the rectangle, or can should it just look like that? — Yrb, Jul 20 '21 at 00:15
I don't want to start an answer and have to keep changing it. How about the obvious `Spacer()` between the `Text()` views in the `Stack()`s. You can pad the bottom ones so they are nailed against the bottom of the view. — Yrb, Jul 20 '21 at 00:44
@Yrb what do you mean by no answer and start changing it? No answer has been given. Yes, I’ve tried spacers but that doesn’t help since the spacing between the two text views will change with variable text from the above text view. The image provides what I want and doesn’t require an answer to be changed. — Petesta, Jul 20 '21 at 01:16

score 1 · Answer 1 · answered Jul 20 '21 at 01:27

I would simply put Spacer()s in between your Text()s in the VStack()s.

struct ContentView: View {
    var body: some View {
        
        VStack(spacing: 0) {
            HStack(spacing: 0) {
                Rectangle()
                    .fill(Color.green)
                    .overlay(
                        VStack {
                            
                            Text("11 / 11 /11 /111/1 111")
                               .font(.system(size: 100.0))
                            Spacer() // add Spacer() here
                            Text("data")
                                .padding() // I padded it so this was up a bit from the bottom. Adjust as necessary.
                        }
                    )
                
                Rectangle()
                    .fill(Color.red)
                    .overlay(
                        VStack {
                            Text("111 / 111")
                               .font(.system(size: 100.0))
                            Spacer() // add Spacer() here
                            Text("data 2")
                                .padding() // I padded it so this was up a bit from the bottom. Adjust as necessary.
                        }
                    )
            }
        }
    }
}

This code leaves you with this:

How to line up bottom text for child view in VStack

1 Answers1