Il y a quelques problèmes avec le code fourni. Le plus important est que vous n'utilisez pas une List juste un ForEach imbriqué dans un ScrollView , ce qui équivaut à placer 1000 UIViews dans un UIStack - pas très efficace. Il existe également de nombreuses dimensions codées en dur et un bon nombre d'entre elles sont des doublons, mais ajoutent néanmoins une charge importante lorsque les vues sont calculées.

J'ai beaucoup simplifié et cela fonctionne avec n = 10000 sans planter:

struct ContentView: View {

    var body: some View {
        GeometryReader { geometry in
            NavigationView {
                ScrollView(.horizontal) {
                    HStack {
                        ForEach(0..<3) { _ in
                            ListView(n: 10000)
                                .frame(width: geometry.size.width - 60)
                        }
                    }   .padding([.leading], 10)
                }
            }
        }
    }
}

struct ListView: View {

    var n: Int

    @State var posts = [Post(id: UUID(), title: "1", description: "11"),
                        Post(id: UUID(), title: "2", description: "22"),
                        Post(id: UUID(), title: "3", description: "33")]

    var body: some View {
        List(0..<self.n) { n in
            RowView(post: self.posts[0])
                .frame(height: 200)
        }
    }
}

struct RowView: View {

    var post: Post

    var body: some View {
        HStack {
            Spacer()
            VStack {
                Spacer()
                Text(self.post.title)
                Text(self.post.description)
                Spacer()
            }
            Spacer()
        }   .background(RoundedRectangle(cornerRadius: 10)
                            .fill(Color(#colorLiteral(red: 0.721568644, green: 0.8862745166, blue: 0.5921568871, alpha: 1))))
    }
}

ScrollView ne réutilise rien. Mais List fait.

alors changez ceci:

List(0..<self.n) { n in
    ,,,
}

pour ça:

ScrollView {
    ForEach(0..<self.n) { n in
        ,,,
    }
}

SwiftUI 2.0

Vous pouvez utiliser des piles Lazy comme le LazyVStack et le LazyHStack . Donc, même si vous les utilisez avec ScrollView , ce sera fluide et performant.

J'ai créé une liste horizontale SwiftUI qui ne charge les vues que pour les objets visibles + un élément supplémentaire en tant que tampon. De plus, il expose le paramètre de décalage en tant que liaison afin que vous puissiez le suivre ou le modifier de l'extérieur.

Vous pouvez accéder au code source iciHList

Essayez! Cet exemple est préparé dans le terrain de jeu rapide.

Exemple de cas d'utilisation

struct ContentView: View {
    @State public var offset: CGFloat = 0
    
    var body: some View {
        HList(offset: self.$offset, numberOfItems: 10000, itemWidth: 80) { index in
            Text("\(index)")
        }
        .frame(width: 200, height: 60)
        .border(Color.black, width: 2)
        .clipped()
    }
}

Pour voir le contenu réutilisé en action, vous pouvez faire quelque chose comme ceci

struct ContentView: View {
    @State public var offset: CGFloat = 0
    
    var body: some View {
        HList(offset: self.$offset, numberOfItems: 10000, itemWidth: 80) { index in
            Text("\(index)")
        }
    }
}

Si vous supprimez .clipped() à la fin, vous verrez comment un composant supplémentaire est réutilisé lors du défilement lorsqu'il sort du cadre.

Mise à jour

Bien que la solution ci-dessus soit toujours valide, il s'agit cependant d'un composant personnalisé. Avec WWDC2020 SwiftUI introduit des composants paresseux tels que LazyHStack

La pile est "paresseuse", en ce sens que la vue de pile ne crée pas d'éléments tant qu'elle n'a pas besoin de les rendre à l'écran.

Gardez à l'esprit. Ma listeHList personnalisée ne fait référence qu'aux composants visibles. Pas celui qui est déjà apparu.