首页 > 解决方案 > 设置可滚动图像 swift UI

问题描述

我试图设置一组图像以获取一些可滚动的图像作为 instagram。

它应该可以使用几何阅读器滚动,但有些东西我不明白。

我尝试设置 2ZStack 并检查显示的位置,然后将视图更新为同一视图。

我的图片在这里

var imagesHaloween: [String] {
    var imageNames = [String]()
    for i in 1..<8 {
        imageNames.append("haloween-\(i)")
    }
    return imageNames
}


var body: some View {
   
ZStack {
        LinearGradient(gradient: Gradient(colors: [.black, .orange]), startPoint: .topTrailing, endPoint: .bottom)
            .ignoresSafeArea(.all)
        
        if !isShown {
            ScrollView {
                LazyVGrid(columns: columns, spacing: 16) {
                    ForEach(imagesHaloween, id: \.self) { image in
                        DetailView(image: image)
                            .onTapGesture {
                                withAnimation(.easeIn) {
                                    isShown.toggle()
                                    tempImages.append(contentsOf: imagesHaloween)
                                    tempImages.insert(image, at: 0)
                                    print(tempImages)
                                }
                            }
                    }
                }
            }
            .padding(.top, 50)
            .padding()
            
        } else {
            
            ZStack {
                ScrollView {
                    GeometryReader { geo in
                        VStack {
                            ForEach(tempImages, id: \.self) { image in
                                Image(image)
                                    .scaledToFill()
                                    .frame(width: geo.size.width)
                                    .padding()
                            }
                        }
                    }
                }
                .edgesIgnoringSafeArea(.all)
            }
            
            .onTapGesture {
                withAnimation(.easeInOut) {
                    isShown.toggle()
                }
            }
        }
    }
}

标签: swiftuiscrollview

解决方案


推荐阅读