ScrollView 不可见 swiftui

Question

项目githubhttps://github.com/m3rtkoksal/Erupt

在我的滚动视图中，只有第一项是可见的。当我滚动时，我看不到页面上的其他项目。我怎样才能看到其他滚动项目？我在服务结构上有三个元素，但我只能看到其中一个。即使我滚动，其他元素也不可见。我应该在应用程序中看到树滚动元素，但我只看到一个。

struct ScrollViewTwo: View {
    
    var body: some View {
        ScrollView(.horizontal) {
            
            ForEach(Service.listDataSecond) { item in
                    CardViewTwo(item: item)
                }
            
            .frame(height: 150)
        }
      }
    }


struct ScrollViewSecondElement: Identifiable {
    var id = UUID()
    var price: String
    var image: String
    var title: String
    var explanation: String
}

struct Service {
    
    static let listDataSecond: [ScrollViewSecondElement] = [
        ScrollViewSecondElement(price: "0", image: "iphone", title: "Iphone X", explanation: "64GB"),
        ScrollViewSecondElement(price: "0", image: "xbox", title: "X Box", explanation: "500GB"),
        ScrollViewSecondElement(price: "00", image: "macmini", title: "Mac Mini", explanation: "512GB SSD")
    ]
}


struct CardViewTwo: View {
    var item: ScrollViewSecondElement
    var width = UIScreen.main.bounds.width
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 15)
                .frame(width: width - 100 , height: 120, alignment: .center)
                .foregroundColor(.black)
            HStack {
                Image(item.image)
                    .resizable()
                    .frame(width: 100, height: 100, alignment: .leading)
                VStack(alignment: .leading) {
                    Text(item.title)
                        .foregroundColor(.white)
                        .font(.body)
                        .fontWeight(.bold)
                    Spacer()
                    Text(item.explanation)
                        .foregroundColor(.white)
                        .font(.caption2)
                        .fontWeight(.light)
                    Spacer()
                    Text(item.price)
                        .foregroundColor(.white)
                        .font(.largeTitle)
                        .fontWeight(.bold)
                }
                .frame( height: 110, alignment: .leading)
                .padding()
                VStack(alignment: .trailing) {
                    HStack {
                        Image(systemName: "star.fill")
                            .foregroundColor(.yellow)
                        Image(systemName: "star.fill")
                            .foregroundColor(.yellow)
                        Image(systemName: "star.fill")
                            .foregroundColor(.yellow)
                    }
                    .frame(width: 5, height: 10)
                    .padding()
                    Spacer()
                    Button(action: {
                        print("Delete button tapped!")
                    }) {
                        ZStack {
                            RoundedRectangle(cornerRadius: 10)
                                .frame(width: 30, height: 30, alignment: .center)
                                .foregroundColor(.red)
                            Image(systemName: "arrow.right")
                                .foregroundColor(.white)
                        }
                    }
                }
                .frame(height: 110, alignment: .trailing)
                .padding()
                .offset(y: -10)
            }
        }
    }
}

Answer 1

您必须在 scrollView:

中使用 Stack

ScrollView(.horizontal) {
        HStack {
            ForEach(Service.listDataSecond) { item in
                CardViewTwo(item: item)
            }
        }
        .frame(height: 150)
    }

此外，如果您的目标是 iOS 14 或更高版本，请考虑使用 Lazy(H\V)Stack。

代码问题

虽然上面描述了原因，但您的具体代码还有另一个问题，即 contentView 中的第 71 行，您将内容剪裁为 .clipShape(Corners())。这将在滚动视图中隐藏额外的 space 堆栈。摆脱它，看看会发生什么。

Answer 2

ForEach默认组成一个组，所以横向滚动需要把所有的动态内容都包裹在HStack里，如下

使用 Xcode 12 / iOS 14 测试（提供的布局没有变化）

var body: some View {
    ScrollView(.horizontal) {
        HStack {               // << here !!
            ForEach(Service.listDataSecond) { item in
                CardViewTwo(item: item)
            }
            .frame(height: 150)
        }
    }
}

ScrollView 不可见 swiftui

ScrollView Not Visible swiftui

uiscrollview

swiftui

代码问题