SwiftUI:提高包含多个图像的视图的性能

Sim*_*enn 5 uikit ios swift swiftui

我有一个 SwiftUI 视图,它由 TabView 组成,该 TabView 具有多个页面,其中包含 VStack 和多个 SubView 类型的视图。这些包含大约 10 张图像,每张图像的大小为 256 x 256 像素。下面的代码提供了一个最小可行的示例:

struct MainView: View {
 
 @EnvironmentObject var viewModel: ViewModel
 
 var body: some View {
     TabView {
         ForEach(0..<5) { i in
             VStack {
                 ForEach(0..<5) { j in
                     SubView(model: viewModel.models[j])
                 }
             }
         }
     }
     .tabViewStyle(.page)
 }
}


struct SubView: View {
 
 var model: Model
 
 var body: some View {
     VStack(spacing: 0) {
         HStack {
             Image(uiImage: model.image)
                 .renderingMode(.original)
                 .resizable()
                 .aspectRatio(contentMode: .fill)
                 .frame(width: 70, height: 70)
                 .clipShape(Circle())
                 .shadow(color: .gray, radius: 1, x: 0, y: 1)
             
             VStack {
                 Text(model.name)
                     .fontWeight(.bold)
                     .multilineTextAlignment(.leading)
                     .lineLimit(2)
                     .minimumScaleFactor(0.5)
             }
         }
         .frame(height: 70)
         
         HStack {
             GeometryReader { geometry in
                 TabView {
                     ForEach(0..<model.smallImages.count, id: \.self){i in
                         HStack {
                             Image(uiImage: model.smallImages[i])
                                 .renderingMode(.original)
                                 .resizable()
                                 .aspectRatio(contentMode: .fill)
                                 .frame(width: 40, height: 40)
                                 .background(.white)
                                 .clipShape(Circle())
                             
                             Text("Some short text")
                                 .scaledToFit()
                                 .minimumScaleFactor(0.01)
                                 .lineLimit(2)
                                 .frame(width: max(geometry.size.width - 60, 0), alignment: .leading)
                         }
                     }
                 }
                 .tabViewStyle(.page(indexDisplayMode: .never))
             }
         }
         .frame(height: 40)
     }
     
 }
}
Run Code Online (Sandbox Code Playgroud)

问题是,当我在主 TabView 的页面之间切换时,总是有轻微的滞后。我的猜测是,这与图像的渲染有关,因为如果没有它们,切换会明显更平滑。有没有办法提高性能,例如通过在后台线程上渲染图像,类似于 AsyncImage 对来自 URL 的图像所做的操作?还有其他方法可以提高性能吗?提前致谢!

编辑: 这是模型的代码:

struct Model: Identifiable, Equatable {
    let id = UUID()
    let image: UIImage?
    let name: String
    let smallImages: [UIImage?] 
    let smallNames: [String] 
    let backgroundColor: Color
    let foregroundColor: Color
}
Run Code Online (Sandbox Code Playgroud)