HELP WANTED - How show section in your WaterfallGrid?

[CPiersigilli]

Come debbo modificare il codice sotto, per visualizzare le sezioni?

ForEach(0..<3, id: \.self) { index in
                Section {
                    Text("Sezione N. \(index)")
                    WaterfallGrid(self.thumbnails) { thumb in
                        ThumbnailView(thumb: thumb)
                            .onTapGesture {
                                let index = self.thumbnails.firstIndex { thumbnails in
                                    thumbnails.id == thumb.id
                                }
                                self.thumbnails[index!].isSelected.toggle()
                        }
                    }
                }
            }

Tieni presente che se utilizzo il codice sotto:

WaterfallGrid(thumbnails) { thumb in
                ThumbnailView(thumb: thumb)
                    .onTapGesture {
                        let index = self.thumbnails.firstIndex { thumbnails in
                            thumbnails.id == thumb.id
                        }
                        self.thumbnails[index!].isSelected.toggle()
                }
            }

funziona perfettamente, come puoi vedere nello screenshot sotto.

[paololeonardi]

Ciao @CPiersigilli, non vedo errori nel modo in cui stai usando Section.
Qual è l'errore di compilazione con Xcode?
Comunque considera che così stai dividendo la finestra in N sezioni e creando N diverse griglie.
Se il tuo scopo è avere un'unica griglia divisa in sezioni non è attualmente possibile con WaterfallGrid.

Hi, I don't see errors in the way you are using Section.
What's the Xcode compile error?
This creates N sections and N grids.
If your goal is to have a single grid with multiple sections is not currently possible with WaterfallGrid.

import SwiftUI
import WaterfallGrid

struct ContentView: View {
    let images: [String] = Generator.Images.random()
    
    var body: some View {
        ForEach(0..<3, id: \.self) { section in
            Section {
                Text("Section N. \(section)")
                WaterfallGrid((0..<self.images.count), id: \.self) { index in
                    Image(self.images[index])
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                }.gridStyle(columns: 4)
            }
        }
    }
}

[CPiersigilli]

Lo screenshot che hai postato è quello che vorrei, ma con il codice che allego sotto, molto simile al tuo:

import SwiftUI
import Photos
import WaterfallGrid

struct ContentView: View {
    
    @State private var thumbnails = [Thumbnail]()
    @State private var numColumsStr = "5"
    
    var body: some View {
        NavigationView {
            ForEach(0..<3, id: \.self) { section in
                Section {
                    Text("Section N. \(section)")
                    WaterfallGrid(0..<self.thumbnails.count, id: \.self) { i in
                        ThumbnailView(thumb: self.thumbnails[i])
                    }
                    .gridStyle(columns: Int(self.numColumsStr) ?? 5)
                }
            }
        }
        .navigationViewStyle(StackNavigationViewStyle())
        .onAppear {
            let fetchOptions = PHFetchOptions()
            fetchOptions.fetchLimit = 40
            fetchOptions.sortDescriptors = [NSSortDescriptor(key: "creationDate", ascending: false)]
            let fetchAssets = PHAsset.fetchAssets(with: fetchOptions)
            for index in 0..<fetchAssets.count {
                let asset = fetchAssets.object(at: index)
                self.thumbnails.append(Thumbnail(asset: asset))
            }
        }
    }
}

ottengo questo:

L'immagine che si ottiene da ThumbnailView(thumb: self.thumbnails[i]) è ottenuta dalla PhotoLibrary. Se elimino la possibilità di visualizzare le sezioni:

import SwiftUI
import Photos
import WaterfallGrid

struct ContentView: View {
    
    @State private var thumbnails = [Thumbnail]()
    @State private var numColumsStr = "5"
    
    var body: some View {
        NavigationView {
//            ForEach(0..<3, id: \.self) { section in
//                Section {
//                    Text("Section N. \(section)")
                    WaterfallGrid(0..<self.thumbnails.count, id: \.self) { i in
                        ThumbnailView(thumb: self.thumbnails[i])
                    }
                    .gridStyle(columns: Int(self.numColumsStr) ?? 5)
//                }
//            }
        }
        .navigationViewStyle(StackNavigationViewStyle())
        .onAppear {
            let fetchOptions = PHFetchOptions()
            fetchOptions.fetchLimit = 40
            fetchOptions.sortDescriptors = [NSSortDescriptor(key: "creationDate", ascending: false)]
            let fetchAssets = PHAsset.fetchAssets(with: fetchOptions)
            for index in 0..<fetchAssets.count {
                let asset = fetchAssets.object(at: index)
                self.thumbnails.append(Thumbnail(asset: asset))
            }
        }
    }
}

le immagini vengono visualizzate correttamente, come puoi vedere nello screenshot sotto riportato:

[CPiersigilli]

Se possono esserti utili, ti invio i codici relativi a ThumbnailView(thumb: self.thumbnails[i]) ed alla struct Thumbnail.
Per ultimare una app, che ho scritto per il mio piccolo studio di ingegneria, sono alla ricerca di un codice che mi permetta di visualizzare le foto come indicato negli screenshot sopra, non potendo utilizzare, in SwiftUI, CollectionView.

[paololeonardi]

Uno strano comportamento con NavigationView in macOS e Catalyst, secondo me.
Rimuovi la navigation view se non ti serve o prova a racchiudere tutte le view dentro un contenitore (VStack, Group):

I think it may be something to do with NavigationView in macOS and Catalyst.
If not needed just remove it or try to embed everything inside a view container (VStack, Group):

NavigationView {
    VStack {
     ...
    }
}

[CPiersigilli]

Il tuo suggerimento ha migliorato un po' la situazione, ma ancora il risultato non è soddisfacente, infatti le immagini si riescono a vedere tutte esclusivamente scrollando all'interno della sezione, pur avendo inserito nel codice il modificatore .frame(height: 480), come puoi vedere nello screenshot sotto:

Il codice che ho utilizzato è:

NavigationView {
VStack() {
                ForEach(0..<3, id: \.self) { section in
                    Section {
                        Text("Section N. \(section)")
                WaterfallGrid(0..<self.thumbnails.count, id: \.self) { i in
                    ThumbnailView(thumb: self.thumbnails[i])
                        .onTapGesture {
                            self.thumbnails[i].isSelected.toggle()
                    }
                }
                .frame(height: 480)
                .gridStyle(columns: Int(self.numColumsStr) ?? 5)
                    }
                }
                    .navigationBarTitle("Ultime 20 Immagini", displayMode: .inline)
                    .navigationBarItems(trailing:
                        TextField("5", text: $numColumsStr)
                )
            }
        }

Inoltre, altra anomalia, è quella che le immagini si vedono soltanto dopo aver modificato il numero delle colonne da TextField("5", text: $numColumsStr).
Dal tuo README.md ho letto che il tuo repository è stato scritto prendendo spunto da SwiftUI Grid, che ho testato con migliori risultati, rispetto al tuo, ma con un errore persistente, che non consente l'aggiornamento della view. Che cosa ne pensi?

[paololeonardi]

Ciao, scusa il ritardo nella risposta.
Nel primo post, ho provato ad anticiparti che sarebbe stato questo il comportamento:
Così stai chiedendo alla vista principale di dividersi in tanti spazi e all'interno di ognuno di questi stai aggiungendo N diverse griglie. Le singole griglie a questo punto hanno una piccola porzione dello schermo per visualizzare il loro contenuto e il resto accessibile tramite scroll.
Se il tuo scopo è avere un'unica griglia divisa in sezioni non è attualmente possibile con WaterfallGrid.

Hi, sorry for the delay.
Above I tried to explain that isn't currently possible to have sections in a single grid.
With your code, you are splitting the main view into N parts and creating N grids. A single grid has then a small portion of the screen to display its content.
If your goal is to have a single grid with multiple sections is not currently possible with WaterfallGrid.