SwiftUI。VStack中视图之间的重叠

Question

我学会了创造这个 HTMLStringView 在我的应用程序中显示html字符串。

struct HTMLStringView: UIViewRepresentable {
    let htmlContent: String

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

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

我发现在我的应用程序中，有一个 height: 112 重叠 ZStack 以及它下面的任何景色。由于 zIndex = 1，如果我想显示 HTMLStringView 下面 ZStack，我必须把一个 Rectangle 的高度112之间。如下面的代码所示。

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)

                            }

我目前使用iPhone 11作为我的模拟器， 和重叠的高度改变 当我切换到模拟器 与其他屏幕尺寸。有谁知道为什么会出现重叠的情况？如果我无法摆脱它，那么它与屏幕尺寸的比例是多少?

先谢谢了!

Answer 1

我有下面的测试代码，显示扩展最初设置为不可见的视图没有问题。

所以我的答案是，不，这不是你展开的那个初始设置为不可见的视图的问题。问题一定是与你的代码中的其他东西有关。

我会仔细检查

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

尤其是 "self.maxHeight "和Rectangle的高度。

作为测试，将 "self.maxHeight "替换为 50，看看会发生什么。

另一个编辑。

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)
        }
    }
}

}