时间戳

首页 > 解决方案 > 如何防止子视图与其父 ScrollView 重叠？

ios - 如何防止子视图与其父 ScrollView 重叠？

问题描述

我的顶部ScrollView和它的孩子Image( img1) 在下面。

我将图像稍微向下拖动，以便您可以看到它与ScrollView角落的边缘重叠。

在此处输入图像描述

这是我的观点：

struct Match: View {
    @State var img1: Image? = nil
    @State var img2: Image? = nil
    @State var img3: Image? = nil
    @State var number: Text = Text("25")
    let storage = Storages()
    var body: some View {
        VStack {
            number.font(.system(size: 25))
                .foregroundColor(Color.white)
                .fontWeight(.bold)
            ScrollView(.vertical, showsIndicators: true) {
                ZStack(alignment: .bottomLeading){
                    img1?.resizable().scaledToFit()
                        Text("Text")
                            .font(.system(size: 30))
                            .fontWeight(.bold)
                            .foregroundColor(.white)
                            .multilineTextAlignment(.leading)
                            .padding(EdgeInsets(top: 0, leading: 35, bottom: 55, trailing: 0))
                            
                        Text("500")
                            .font(.system(size: 30))
                            .fontWeight(.bold)
                            .foregroundColor(.white)
                            .multilineTextAlignment(.leading)
                            .padding(EdgeInsets(top: 0, leading: 35, bottom: 20, trailing: 0))
                }.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)
                img2?.resizable().scaledToFit()
                img3?.resizable().scaledToFit()
            }.background(
                RoundedRectangle(cornerRadius: 15)
                    .foregroundColor(Color("LightBlack70%"))
            ).frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)
            
    }
    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)

如何防止图像重叠ScrollView？有ScrollView一个cornerRadius: 15.

标签： iosswiftswiftui

解决方案

尝试添加剪辑形状（因为它不是 ScrollView 但您自定义添加的背景具有圆角），例如

ScrollView(.vertical, showsIndicators: true) {
 
 // .. content here

}.background(
    RoundedRectangle(cornerRadius: 15)
        .foregroundColor(Color("LightBlack70%"))
).clipShape(
    RoundedRectangle(cornerRadius: 15)
).frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)

推荐阅读