SwiftUI: Overlap between views in VStack

Question

I learned to create this HTMLStringView to show html strings in my app:

struct HTMLStringView: UIViewRepresentable {
    let htmlContent: String

    func makeUIView(context: Context) -> WKWebView {
        return WKWebView()
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {
        uiView.loadHTMLString(htmlContent, baseURL: nil)
    }
}

I found that there is a height: 112 overlap between the ZStack and whatever view below it. As zIndex = 1, if I want to show the HTMLStringView below the ZStack, I will have to put a Rectangle of height 112 in between. As shown in the code below:

ScrollView{

                            VStack(spacing:0){


                                ZStack{

                                    ZStack (alignment: .leading){
                                        UrlImageView(urlString: thisItem.cover_img, imageWidth: self.expandedScreen_shown ? UIScreen.main.bounds.width : self.cardWidth, imageHeight: self.maxCardHeight)
                                    }.offset(y: self.expandedScreen_shown ? 0 : 0)
                                        .clipped()
                                        .background(Color.white)
                                        .foregroundColor(Color.green)
                                        .edgesIgnoringSafeArea(.top)

                                    VStack (alignment: .leading){
                                        Spacer()

                                        Text("\(thisItem.title)")
                                            .font(.title)
                                            .foregroundColor(Color.white)
                                            .padding(.leading, 23)
                                            .padding(.trailing, 23)
                                            .padding(.top, 20)
                                            .padding(.bottom, 10)

                                        Text("\(thisItem.author) | \(thisItem.source)")
                                            .font(.body)
                                            .foregroundColor(Color.white)
                                            .padding(.leading, 23)
                                            .padding(.trailing, 23)
                                            .padding(.bottom, 20)
                                    }

                                }.frame(height: self.maxCardHeight * 0.5)
                                    .zIndex(1)

                                Rectangle()
                                    .fill(Color.white)
                                    .frame(height: 112)

                                HTMLStringView(htmlContent: "<p>Hello World!</p>")
                                    .padding()
                                    .background(Color.white)
                                    .frame(height: 300)
                                    .border(Color.green)

                            }

I am currently using iPhone 11 as my emulator, and the overlap height changes when I switch to emulators with other screen sizes. Does anyone know why there is an overlap? If I cannot get rid of it, what proportion is it with respect to the screen size?

Thanks in advance!

Answer 1

I have the following test code that shows there is no problem with expanding the view that is set to be invisible initially.

So my answer is, no it is not a problem with your expanding view that is set to be invisible initially. The problem must be related to something else in your code.

I would look closely at the

 ZStack{...}
 .frame(height: self.maxHeight)
 .zIndex(1)

especially the "self.maxHeight" and the height of the Rectangle.

As a test replace "self.maxHeight" with say 50, and see what happens.

Another edit.

class Item {
var title = "title"
var author = "author"
var source = "source"
var cover_img = "cover_img"
}

struct ContentView: View {

@State var expandedScreen_shown = false
@State var maxHeight: CGFloat = UIScreen.main.bounds.height/2
@State var cardWidth = CGFloat(UIScreen.main.bounds.width)
@State var maxCardHeight = CGFloat(444)

func itemView(_ thisItem: Item) -> some View {
    VStack (alignment: .leading) {
        Text(thisItem.title)
            .font(.title)
            .foregroundColor(Color.white)
            .padding(.leading, 23)
            .padding(.trailing, 23)
            .padding(.top, 20)
            .padding(.bottom, 10)

        Text("\(thisItem.author) | \(thisItem.source)")
            .font(.body)
            .foregroundColor(Color.white)
            .padding(.leading, 23)
            .padding(.trailing, 23)
            .padding(.bottom, 20)
    }
}

func imageView(_ thisItem: Item) -> some View {
    VStack {
        ZStack {
            ZStack (alignment: .leading) {
                UrlImageView(urlString: thisItem.cover_img, imageWidth: self.expandedScreen_shown ? UIScreen.main.bounds.width : self.cardWidth, imageHeight: self.maxCardHeight)
            }.frame(width: self.expandedScreen_shown ? UIScreen.main.bounds.width : self.cardWidth, height: self.maxCardHeight)
                .offset(y: self.expandedScreen_shown ? 0 : 0)
                .clipped()
                .background(Color.blue)
                .foregroundColor(Color.green)
                .edgesIgnoringSafeArea(.top)

            self.itemView(thisItem)

        }.frame(height: self.maxCardHeight * 0.5)
            .zIndex(1)
    }
}

var body: some View {
    ScrollView {
        VStack (spacing:0) {

            imageView(Item())

            Rectangle()
                .fill(Color.red)
                .frame(height: 112)

            HTMLStringView(htmlContent: "<p>Hello World!</p>")
                .padding()
                .background(Color.white)
                .frame(height: 300)
                .border(Color.green)
        }
    }
}

}