ScrollView 在 SwiftUI 中导致 CPU 使用率达到 100%

Question

我正在尝试创建图像的水平列表，并在 SwiftUI 中编写了以下代码，但我不确定这里出了什么问题，但 CPU 使用率和 Ram 达到了最高水平。

我认为这是因为 WebImage 但它也不适用于 Rectangle 所以一定有一些与我编写的代码相关的东西。

private let reader = UIScreen.main.bounds

var body: some View {
    ScrollView(Axis.Set.horizontal, showsIndicators: false) {
            HStack(spacing: 0 ) {
                ForEach(self.images, id: \.self){ imageURL in
                    Rectangle()
                        .frame(width:self.reader.size.width, height: self.reader.size.height, alignment: .center)
                        .background(Color.green)
                        .border(Color.black,width: 10.0)
//                            WebImage(url: URL.init(string: imageURL))
//                                .resizable()
//                                .indicator(.activity) // Activity Indicator
//                                .scaledToFill()
//                                .frame(width:self.reader.size.width, height: self.reader.size.height, alignment: .center)
//                                .background(Color.red)
                }
            }
    }.onAppear {
        UIScrollView.appearance().isPagingEnabled = true
    } 
}

任何帮助将不胜感激。

谢谢

Answer 1

假设您试图让每个矩形/图像填充屏幕并水平滚动，那么这应该可以完成工作：

var body: some View {
    GeometryReader { proxy in
        ScrollView(Axis.Set.horizontal, showsIndicators: false) {
            HStack(spacing: 0 ) {
                ForEach(self.images, id: \.self){ imageURL in
                    Color.green
                        .frame(width: proxy.size.width, height: proxy.size.height, alignment: .center)
                        .border(Color.black,width: 10.0)
//                              WebImage(url: URL.init(string: imageURL))
//                                  .resizable()
//                                  .indicator(.activity) // Activity Indicator
//                                  .scaledToFill()
//                                  .frame(width:self.reader.size.width, height: self.reader.size.height, alignment: .center)
//                                  .background(Color.red)
                }
            }
        }.onAppear {
            UIScrollView.appearance().isPagingEnabled = true
        }
    }
}

这不依赖于屏幕边界，而是使用 GeometryReader 来获取包含滚动视图的大小。

还有一点要记住的是，所有的矩形/图像都将立即创建，没有滚动视图的缓存，所以如果你有很多可能会影响性能。

Answer 2

这似乎是 Xcode 11.5 本身的问题，因为此代码现在可以正常工作。

ScrollView(Axis.Set.horizontal, showsIndicators: false) {
                HStack(spacing: 0 ) {
                    ForEach(self.images, id: \.self){ imageURL in
                        WebImage(url: URL.init(string: imageURL))
                            .scaledToFit()
                            .frame(width: proxy.size.width, height: proxy.size.height, alignment: .center)
                            .clipped()
                            .background(Color.white)
                    }
                }
            }