Question

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

在我的滚动视图中，仅第一项可见。滚动时看不到页面上的其他项目。如何查看其他滚动项目？我在Service结构上有三个Elements，但只能看到其中之一。即使滚动，其他元素也不可见。我应该在应用程序中看到树滚动元素，但是我只能看到一个。

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

您必须在Stack内使用scrollView：

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

此外，如果您要定位iOS 14或更高版本，请考虑使用Lazy(H\V)Stack。

代码发布

尽管上面已经描述了原因，但是您的特定代码还有另一个问题，并且在71的{{1}}行中，您将内容剪切为contentView。这将在滚动视图中隐藏堆栈的额外空间。摆脱它，看看会发生什么。

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

2 个答案:

代码发布