如何防止子视图与其父 ScrollView 重叠? [英] How to prevent child Views overlapping their parent ScrollView?

问题描述

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

The top of my ScrollView and it's child Image (img1) are below.

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

I dragged the image down slightly so you can see that it's overlapping the edges of the ScrollView corners.

这是我的观点:

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.

How do I prevent the image overlapping the ScrollView? The ScrollView has a cornerRadius: 15.

推荐答案

尝试添加剪辑形状(因为它不是 ScrollView 而是您自定义添加的背景有圆角)，例如

Try to add clip shape (because it is not ScrollView but your custom added background has rounded corners), like

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)

这篇关于如何防止子视图与其父 ScrollView 重叠?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！