如何更新 ScrollView 中的内容：SwiftUI

Question

我正在尝试更新滚动视图中的内容，但由于 makeUIView 在视图生成时只调用了一次。当我点击 1 张图片，然后点击 2 张图片时，它没有刷新。

但是，如果我单击“无图像”，然后单击“图像 2”，它会按预期工作。

这是我的代码。

struct ContentView: View {
    @State var images:[String] = []
    var body: some View {
        VStack{
            HStack{
                Button(action: { self.images = [] }, label: {
                    Text("No Images")
                })
                Button(action: { self.images = ["sample_1"] }, label: {
                    Text("1 Images")
                })
                Button(action: { self.images = ["sample_1","sample_2"] }, label: {
                    Text("2 Images")
                })
            }
            if self.images.count > 0{
                GeometryReader { (reader) in
                    STHorizontalScrollView(images: self.images, size: reader.size)
                }
            }else{
                Text("No Images")
            } 
        }
    }
}

struct STHorizontalScrollView:UIViewRepresentable {
    var images:[String]
    var size:CGSize
    func makeUIView(context: Context) -> UIScrollView {
        let scrollView = UIScrollView()
    
        // Calculating the Width
        let widthForContent = CGFloat(self.images.count) * size.width
        scrollView.contentSize = CGSize.init(width: widthForContent, height: size.height)
        scrollView.isPagingEnabled = true
   
        // Hosting Controller
        let hostingController = UIHostingController(rootView: HorizontalList(images: images, size: size))
        hostingController.view.frame = CGRect.init(x: 0, y: 0, width: widthForContent, height: size.height)
    
        // Add View to scrollview
       scrollView.addSubview(hostingController.view)
    
        return scrollView
    }
    func updateUIView(_ uiView: UIScrollView, context: Context) {
    
    }
}

struct HorizontalList:View {
    var images:[String]
    var size:CGSize
    var body: some View{
        HStack(spacing: 0.0) {
            ForEach(self.images, id:\.self){ image in
                Image(image)
                    .resizable()
                    .aspectRatio(contentMode: ContentMode.fill)
                    .frame(width: self.size.width, height: self.size.height)
                    .clipped()
            }
        }
    }
}

不确定在更新方法中写什么，因为实际内容在 HorizontalList 结构中。

我们将不胜感激。

谢谢

Answer 1

当依赖数据的某些绑定更新时，Representable 也会更新，因此当图像更改时，您需要在更新 updateUIView 中重建内部结构。

这是一个解决方案。使用 Xcode 11.4 / iOS 13.4

测试

可表示的用法

// images as binding
STHorizontalScrollView(images: self.$images, size: reader.size)

和可代表本身

struct STHorizontalScrollView:UIViewRepresentable {
    @Binding var images:[String]
    var size:CGSize

    func makeUIView(context: Context) -> UIScrollView {
        UIScrollView()
    }

    func updateUIView(_ scrollView: UIScrollView, context: Context) {
        _ = scrollView.subviews.map { [=11=].removeFromSuperview() }
        guard images.count != 0 else { return }
        
        // Calculating the Width
        let widthForContent = CGFloat(self.images.count) * size.width
        scrollView.contentSize = CGSize.init(width: widthForContent, height: size.height)
        scrollView.isPagingEnabled = true

        // Hosting Controller
        let hostingController = UIHostingController(rootView: HorizontalList(images: images, size: size))
        hostingController.view.frame = CGRect.init(x: 0, y: 0, width: widthForContent, height: size.height)

        // Add View to scrollview
       scrollView.addSubview(hostingController.view)
    }
}

backup

如何更新 ScrollView 中的内容：SwiftUI

How to update the content inside the ScrollView : SwiftUI

xcode

uiscrollview

swift

swiftui

uiviewrepresentable