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
– Yrb, Commented Jul 20, 2021 at 0: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
– Yrb, Commented Jul 20, 2021 at 0: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
– Yrb, Commented Jul 20, 2021 at 0:44

Yrb · Accepted Answer · 2021-07-20 01:27:26Z

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:

Collectives™ on Stack Overflow

How to line up bottom text for child view in VStack

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related