Views Compressed by Other Views in Swiftui VStack and List

Views compressed by other views in SwiftUI VStack and List

You might prevent the views in VStack from being compressed by using

  .fixedSize(horizontal: false, vertical: true)

For example:
I have the following VStack:

VStack(alignment: .leading){
        ForEach(group.items) {
            FeedCell(item: $0)
        }
    }

Which render compressed Text()

When I add .fixedSize(horizontal: false, vertical: true)
it doesn't compress anymore

VStack(alignment: .leading){
        ForEach(group.items) {
            FeedCell(item: $0)
                .fixedSize(horizontal: false, vertical: true)
        }
    }

Views in VStack overlapping

I am answering my own question in case someone stumbles on this. I just needed to embed each menu in an individual VStack for some reason. Although, you should avoid the geometryreader since that was the source of the issue.

swiftui list text compressed

Make lineLimit(nil) to some large number like lineLimit(250)

If still not working add this modifier after padding

.fixedSize(horizontal: false, vertical: true)

SwiftUI views in VStack are overlapping each other

The Issue:

The issue of overlapping is with this section:

    .scaledToFit() // Not needed
    .shadow(color: .gray, radius: 10, x: 5, y: 5)
    .scaledToFill() // Not needed

---

The Answer:

You don't need neither scaledToFit nor scaledToFill there.

---

Visualizing the Issue:

using scaledToFill:

using scaledToFit:

See blue borders? Thats the issue.

---

Some Tips:

1. There is no need to create a dummy Rectangle for background color. .background modifier can accept a color directly like:

.background(Color.gray)

2. You can ignore safe area only for background modifier like:

.background(Color.gray.edgesIgnoringSafeArea(.all))

3. Don't repeat modifiers! group them together and apply once like:

Group {
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit")
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit")
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit")
}
.frame(width: geometry.size.width * 0.8, alignment: .leading)
.fixedSize(horizontal: false, vertical: true)

4. Multiplying width in a float number can cause misaligned images. So always round the result like:

(geometry.size.width * 0.88).rounded(.down)

---

Result:

Image:

Refactored Code:

var body: some View {
    VStack(spacing: 10) {
        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")
            .padding()

        GeometryReader { geometry in
            VStack(spacing: 0) {
                Image("tmp")
                    .resizable()
                    .scaledToFill()
                    .frame(width: (geometry.size.width * 0.88).rounded(.down))

                VStack(spacing: 10) {
                        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit")
                        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit")
                        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit")
                }
                .frame(width: (geometry.size.width * 0.8).rounded(.down), alignment: .leading)

                .padding()
                .background(Color.white)
            }
            .cornerRadius(10)
        }
        .shadow(color: .gray, radius: 10, x: 5, y: 5)
        Spacer()
    }
    .background(Color.gray.edgesIgnoringSafeArea(.all))
}

SwiftUI, remove space between views in a VStack?

Since you know that your HStack with the blue rectangles is going to be a height of 150, you should constrain it to that using .frame(height: 150):

GeometryReader { geometry in
    ...
}
.padding()
.frame(height: 150) //Here

Otherwise, the GeometryReader will occupy all available vertical space.

Re: your web dev comparison, check out the Xcode view hierarchy inspector. It's not exactly the same, but it's in the same vein: https://developer.apple.com/library/archive/documentation/ToolsLanguages/Conceptual/Xcode_Overview/ExaminingtheViewHierarchy.html

How to align text views differently under a vstack in swiftui?

I can assume that you just need padding in right place to have something like "margins", so a solution can be like

var body: some View {
    VStack(alignment: .leading) {
        Text("This is the first paragraph")
            .foregroundColor(Color.red)
            .frame(maxWidth: .infinity)    // << default center !!

        Spacer().frame(height: 10)
        Text("This is a paragraph with ").foregroundColor(Color.blue) + Text("multiple colors.").foregroundColor(Color.green)
        Spacer().frame(height: 10)
        if #available(iOS 15.0, *) {
            AsyncImage(url: URL(string: "https://www.example.org/img/image.png")) { image in
                image.resizable()
            } placeholder: {
                Color.red
            }
            .frame(width: 128, height: 128)
            .clipShape(RoundedRectangle(cornerRadius: 25))
            .frame(maxWidth: .infinity)  // << for center !!
        }
        Spacer().frame(height: 10)
        Text("Final paragraph").foregroundColor(Color.red)
        Spacer()
    }
    .padding(.horizontal, 24)   // << for margins !!
}

---

Related Topics