0

我学会了创建它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 的 a。如以下代码所示：

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 作为我的模拟器，当我切换到其他屏幕尺寸的模拟器时，重叠高度会发生变化。有谁知道为什么会有重叠？如果我无法摆脱它，它与屏幕尺寸的比例是多少？

提前致谢！

4

1 回答 1

0

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

所以我的回答是，不，最初设置为不可见的扩展视图不是问题。问题必须与代码中的其他内容有关。

我会仔细查看

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

特别是“self.maxHeight”和矩形的高度。

作为测试，将“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)
        }
    }
}

}
于 2020-06-02T06:46:57.120 回答