ScrollView Not Visible swiftui

Question

Projects github https://github.com/m3rtkoksal/Erupt

In my scrollviews only the first item is visible. When I scroll I can not see other items on the page. How can I see other scroll items? I have three Elements on Service struct but I can only see one of them. Other elements are just not visible even though I scroll. I should see tree scroll elements in the app but I only see one.

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: "$600", image: "iphone", title: "Iphone X", explanation: "64GB"),
        ScrollViewSecondElement(price: "$500", image: "xbox", title: "X Box", explanation: "500GB"),
        ScrollViewSecondElement(price: "$2000", 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

You must use a Stack inside the scrollView:

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

Also, consider using Lazy(H\V)Stack if you are targetting iOS 14 or later.

---

The code issue

Although the cause is described above, your specific code has another problem and that is in line 71 in the contentView, you are clipping the content as .clipShape(Corners()). This will hide extra space of the stack inside the scroll view. Get rid of that and see what happen.

Answer 2

The ForEach by default form a group, so for horizontal scroll you need to wrap all dynamic content into HStack, as below

Tested with Xcode 12 / iOS 14 (no changes in provided layout)

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