swift - 如何更新 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由于实际内容在struct内部，因此不确定在 update 方法中要写什么。

任何帮助将不胜感激。

谢谢

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 { $0.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)
    }
}