Lazy

Lazy

Lazy est un conteneur de vue qui crée une disposition de ses vues enfants de manière « paresseuse » (lazy). Ca signifie que contrairement à VStack ou HStack, qui charge toutes ses vues enfants en mémoire dès que la vue parent est chargée, LazyVStack et LazyHStack charge ses vues enfants uniquement lorsqu’elles sont sur le point d’apparaître à l’écran. Cette approche optimise les performances et l’utilisation de la mémoire, en particulier pour les listes longues ou complexes.

Lazy version Verticale lazyVStack

  struct  LazyVStackExample : View {
    var body : some  View {
        ScrollView {
            LazyVStack {
                ForEach (0 ..< 100) { index in
                    Image(systemName: "swift")
                        .frame(width: 100, height: 100)
                        .background(Color.orange)
                        .cornerRadius(10)
                }
            }
        }
    }
}

Lazy version Horizontal lazyHStack

  struct  LazyVStackExample : View {
    var body : some  View {
        ScrollView {
            LazyHStack {
                ForEach (0 ..< 100) { index in
                    Image(systemName: "swift")
                        .frame(width: 100, height: 100)
                        .background(Color.orange)
                        .cornerRadius(10)
                }
            }
        }
    }
}

Exemple comparatif de lazyStack et de Stack

Pour observer un cas de figure, on va volontairement intégrer énormément de vue sur notre écran.

struct LazygoodPracticeView: View {
    var body: some View {
        ScrollView([.horizontal, .vertical]) {
           VStack {
                ForEach(0..<20, id: \.self) { rowIndex in
                    HStack {
                        ForEach(0..<100, id: \.self) { columnIndex in
                            Text("N° \(rowIndex * 100 + columnIndex)")
                                .padding()
                                .background(Color.orange.secondary, in: RoundedRectangle(cornerRadius: 10))
                        }
                    }
                }
            }
        }
    }
}

Ici avec une VStack, toutes les vues sont chargé, on constate que la mémoire sature et nous retourne une vue biaisé.

struct LazygoodPracticeView: View {
    var body: some View {
        ScrollView([.horizontal, .vertical]) {
            LazyVStack {
                ForEach(0..<20, id: \.self) { rowIndex in
                    LazyHStack {
                        ForEach(0..<100, id: \.self) { columnIndex in
                            Text("N° \(rowIndex * 100 + columnIndex)")
                                .padding()
                                .background(Color.orange.secondary, in: RoundedRectangle(cornerRadius: 10))
                        }
                    }
                }
            }
        }
    }
}

Avec les Lazy, comme les vues sont chargé de manière paresseuse (quand elles apparaissent à l’écran) nous n’avons aucun problème de chargement.

Pourquoi ne pas toujours utiliser le Lazy alors ?

Il n’est pas toujours pertinent d’utiliser LazyVStack ou LazyHStack à la place d’un VStack ou HStack. L’une des raisons principales est que les conteneurs lazy n’évaluent pas immédiatement leurs vues enfants, ce qui peut poser problème dans des mises en page où l’on a besoin de connaître la taille exacte des éléments dès le chargement. Par exemple, si tu utilises LazyVStack dans une ScrollView, les dimensions de son contenu ne seront pas immédiatement calculées, ce qui peut rendre les animations, les alignements ou certaines interactions plus difficiles à gérer.

De plus, si la liste est courte, l’optimisation apportée par LazyVStack est inutile, et un simple VStack est plus adapté. Un LazyVStack introduit un léger coût de calcul supplémentaire pour charger dynamiquement ses vues enfants au lieu de les disposer immédiatement. Ainsi, dans des cas où la performance n’est pas un problème, utiliser une VStack permet une gestion plus prévisible et plus fluide de l’interface utilisateur.