3
votes

Comment créer une grille dans SwiftUI

Je sais que nous pouvons créer une liste dans SwiftUI vertical comme ceci,

struct ContentView : View {
    var body: some View {
        NavigationView {
            List {
                Text("Hello")
            }
        }
    }
}

mais y a-t-il un moyen de diviser la liste en 2 ou 3 ou peut-être plus écran comme une grille comme nous l'avons fait dans UICollectionView

swift swiftui

0 commentaires

4 Réponses :

3
votes

Vous pouvez créer votre customView comme ceci pour obtenir le comportement UICollectionView: -

struct ContentView : View {
    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            ScrollView(showsHorizontalIndicator: true) {
                HStack {
                    ForEach(0...10) {_ in
                        GridView()
                    }
                }
            }
            List {
                ForEach(0...5) {_ in
                    ListView()
                }
            }
            Spacer()
        }
    }
}

struct ListView : View {
    var body: some View {
        Text(/*@START_MENU_TOKEN@*/"Hello World!"/*@END_MENU_TOKEN@*/)
        .color(.red)
    }
}

struct GridView : View {
    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            Image("marker")
                .renderingMode(.original)
                .cornerRadius(5)
                .frame(height: 200)
                .border(Color.red)
            Text("test")
        }
    }
}

1 commentaires

Soutiendra-t-il la resusablity

4
votes

Exemple basé sur ZStack ici

Grid(0...100) { _ in
    Rectangle()
        .foregroundColor(.blue)
}

0 commentaires

2
votes

Disponible pour iOS / iPadOS 14 sur Xcode 12 . Vous pouvez utiliser LazyVGrid pour charger uniquement ce que l'utilisateur voit à l'écran et non la liste entière, Liste est paresseux par défaut.

import SwiftUI

//MARK: - Adaptive
struct ContentView: View {
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: [GridItem(.adaptive(minimum:100))]) {
                ForEach(yourObjects) { object in
                    YourObjectView(item: object)
                }
            }
        }
    }
}

//MARK: - Custom Columns
struct ContentView: View {
        
    var body: some View {
         ScrollView {   
             LazyVGrid(columns: Array(repeating: GridItem(), count: 4)) {
                 ForEach(yourObjects) { object in
                     YourObjectView(item: object)
                 }
             }
         }
    }
}

N'oubliez pas de remplacer les informations objets avec vos informations et YourObjectView avec votre customView

0 commentaires

1
votes

iOS 14

Vous pouvez utiliser 2 nouvelles vues natives:

LazyHGrid
LazyVGrid

Avec du code ou directement depuis la bibliothèque:

La bibliothèque contient un exemple de code entièrement fonctionnel que vous pouvez tester vous-même.

0 commentaires