How to prevent view from being pushed by other view expanding in SwiftUI

Question

If you have something like this. You'll see that the bottom views rectangle 1 and rectangle 2 are aligned with one another.

        HStack(spacing: 0) {
            Rectangle()
                .fill(Color.smashFrameStartup)
                .overlay(
                    VStack {
                        Text("Data").font(.system(size: 100.0))
                        Text("rectangle 1")
                    }
                )

            Rectangle()
                .fill(Color.smashOnShield)
                .overlay(
                    VStack {
                        Text("Data").font(.system(size: 100.0))
                        Text("rectangle 2")
                    }
                )
        }

However as soon as you make the top text longer from "Data" to "Data 2" or anything longer, you can see that the top view pushes the bottom view further down. How do I stop the bottom view from being pushed further down no matter the length of the text in the top view?

Here's the updated code and what happens.

        HStack(spacing: 0) {
            Rectangle()
                .fill(Color.smashFrameStartup)
                .overlay(
                    VStack {
                        Text("Data").font(.system(size: 100.0))
                        Text("rectangle 1")
                    }
                )

            Rectangle()
                .fill(Color.smashOnShield)
                .overlay(
                    VStack {
                        Text("Data 2").font(.system(size: 100.0))
                        Text("rectangle 2")
                    }
                )
        }

Is it possible to position the text view so it doesn't move? I would like to have rectangle 2 to be aligned with rectangle 1 no matter the length of the above text view on either rectangle.

I should also note that if the above text view string is long like below, it'll be truncated which I don't want.

        HStack(spacing: 0) {
            Rectangle()
                .fill(Color.green)
                .overlay(
                    VStack {
                        Text("Data").font(.system(size: 100.0))
                        Text("rectangle 1")
                    }
                )

            Rectangle()
                .fill(Color.red)
                .overlay(
                    VStack {
                        Text("Data 2 with even more information here").font(.system(size: 100.0))
                        Text("rectangle 2")
                    }
                )
        }

I've also tried adding minimumScaleFactor with 0.4 and it does show the whole text without it being truncated but it has the same problem where it'll push the bottom text view further down.

        HStack(spacing: 0) {
            Rectangle()
                .fill(Color.green)
                .overlay(
                    VStack {
                        Text("Data").font(.system(size: 100.0))
                        Text("rectangle 1")
                    }
                )

            Rectangle()
                .fill(Color.red)
                .overlay(
                    VStack {
                        Text("Data 2 with even more information here").font(.system(size: 100.0))
                            .minimumScaleFactor(0.4)
                        Text("rectangle 2")
                    }
                )
        }

EDIT: Criteria

Have the position of the two bottom text views in each rectangle be aligned with one another like in the first picture and at that position on the screen.
The top text view can be of variable length, whether it's 2 or up to 40 characters long, it shouldn't cause the bottom text view to be pushed further down. It should be noted that the length of the string in the top text view can be a different length compared to the top text view in the other rectangle. Despite that, the bottom views shouldn't move down and they should still be aligned with one another.
If the top view text string starts to become too long, it's ok to change the font size as long as we don't shift the bottom text view. In order to show all of the text.
The very long string in the top view shouldn't be truncated like in the third picture. I tried fixing this with minimumScaleFactor and the truncated problem is fixed like in the fourth picture but as you can see the bottom text view is still shifted.

Asking the same question that you just asked is not helpful to anyone. You still have not clearly stated what you actually want to accomplish. Your stated goals of not moving the view down and not causing concatenation are not reconcilable. You could try putting the top view in a ScrollView, but that may not give you the look you want. — Yrb, Jul 20 '21 at 19:34
@Yrb I mean it is actually helpful for me and if I try rephrasing it with more information then perhaps someone will understand and can possibly help? No reason to be a prick. Not helpful to anyone as you like to say. I have actually stated what I want to accomplish so not sure where the confusion is here. My apologies if you can’t understand? — Petesta, Jul 20 '21 at 19:48
This is what I was trying to avoid with your first question. I could see that you had not firmly established what you wanted it to look like. You then said you wanted it to look exactly like the layout you added to your question, which I did answered. Now, what was wrong with the layout that I answered with? — Yrb, Jul 20 '21 at 19:51
@Yrb I know you provided a solution and appreciate that but that code falls victim to the above scenarios I listed. Your suggestion still pushes the bottom view all the way down and adding a bottom padding will only fix it in the instance, not every instance of the bottom string being of variable length. Even if you try changing the font size, the bottom view still moves its position. — Petesta, Jul 20 '21 at 20:07
So you want to be able to change the font size of the bottom view as well? That would have been helpful information to have included in your initial question. Are there any other criteria you have for this problem? — Yrb, Jul 20 '21 at 20:14
@Yrb I think I mistyped on the previous comment and can’t update it. I meant to say the top text will be of variable length. I updated the post to have the criteria at the end of it since it’s probably too much here. There are four points I was trying to address. Hopefully that clears it up and it has an image. — Petesta, Jul 20 '21 at 20:35
1. Where on the screen should the bottom views be? 3. See [How to scale text to fit parent view with SwiftUI?](https://stackoverflow.com/questions/57035746/how-to-scale-text-to-fit-parent-view-with-swiftui). 4. So, the 4th picture is what you want the view to actually look like? — Yrb, Jul 20 '21 at 20:40
@Yrb I’d like for that text to be slightly below the center of the screen. If you look at the last image in the EDIT, you’ll see how the bottom texts are slightly below the center point of the square no matter the length and size of the top text. Does that help? — Petesta, Jul 20 '21 at 20:42
1. Where on the screen should the bottom views be? 3. See How to scale text to fit parent view with SwiftUI?. 4. So, the 4th picture is what you want the view to actually look like? (was in the process of editing when you responded) — Yrb, Jul 20 '21 at 21:04
@Yrb 1. The bottom text views should be placed like in the picture in the EDIT screen. I'm not sure what more to say for that. 3. Your link looks helpful and I'm checking it out. 4. Not exactly. The top text view shows itself in its entirety without being truncated but I don't want that bottom text view to shift down because of it. Looking at the last picture in the EDIT, you’ll see how the bottom text views, `active on` and `total frames` are slightly below the center position of the square no matter the length and size of the top text. See `active on` and `total frames`. — Petesta, Jul 20 '21 at 23:08
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/235142/discussion-between-yrb-and-petesta). — Yrb, Jul 21 '21 at 14:40

How to prevent view from being pushed by other view expanding in SwiftUI

0 Answers0