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.

struct WaterfallGallery: View {
    @ObservedObject var loader: ImagesLoader
    @State var urlPaths: [String]
    
    init(urlPaths: [String]) {
        var URLs = [URL]()
        for urlPath in urlPaths {
            //TODO: provide defualt error image
            URLs.append(URL(string: urlPath)!)
        }
        self._urlPaths = State(initialValue: urlPaths)
        self.loader = ImagesLoader(urls: URLs)
    }
    
    var body: some View {
        Group {
            if self.loader.isLoading {
                placeHolder
            } else {
                gallery
            }
        }
            .onAppear(perform: loader.load)
            .onDisappear(perform: loader.cancel)
    }
    
    private var gallery: some View {
            WaterfallGrid(self.loader.$images) { uiImage in
                Image(uiImage: uiImage).resizable().aspectRatio(contentMode: .fit).cornerRadius(10)
            }
           .gridStyle(columns: 2)
    }
    
    private var placeHolder: some View {
         Text("Loading")
    }
}

I followed the example to use WaterfallGrid but keep getting Cannot convert value of type 'some View' to closure result type '_' on line:

Image(uiImage: uiImage).resizable().aspectRatio(contentMode: .fit).cornerRadius(10)

Hi, your WaterfallGrid seems very nice and could fit in may App. However I wonder if you could giving me some pointers or direct help on how I can adapt your image grid example so that I can pass an array of URLs (URLs of jpg's in my Apps document directory) instead of using Assets.xcassets? Regards, Claes

Hello,

I run it on simulator and I don't know if it's a bug but you can't scroll to see all screen on AppleTV, I think it's because images are not focusable..

I am getting this warning when I run my app and go to the view that is using the WaterfallGrid.

I think it's causing what than displays to disappear when I scroll up on the page. I'm not sure.

`///:  FAVORITE ITEMS GRID
     WaterfallGrid(favoriteItems.favorites, id: \.self) { item in
        ZStack(alignment: .topTrailing) {
            FavoriteItemView(favoriteItem: item)
         } ///: ZSTACK
       } //: WATERFALL
          .gridStyle(
             columnsInPortrait: 2,
             columnsInLandscape: 3,
             spacing: 10,
             animation: .easeInOut(duration: 0.5)
          )
          .padding(EdgeInsets(top: 0, leading: 8, bottom: 15, trailing: 8))
                .scrollOptions(direction: .vertical)
                .onAppear(perform: loadFavorites)`

I am pulling the items that display from Cloud Firestore.

`func loadFavorites() {
    
    db.collection("favorites").getDocuments() { (querySnapshot, err) in
        if let err = err {
            print("Error getting documents: \(err)")
        } else {
            for document in querySnapshot!.documents {

                let docId = document.documentID
                let itemInfo = document.data()
                let itemType = itemInfo["itemType"] as? String ?? "shareable"
                let itemTitle = itemInfo["itemTitle"] as? String ?? "DaySpring"
                let itemImage = itemInfo["itemImage"] as? String ?? "No Photo"
                let itemAuthor = itemInfo["itemAuthor"] as? String ?? "DaySpring"
             
                db.collection("users").document(userId!).addSnapshotListener { documentSnapshot, error in
                    guard let userFavs = documentSnapshot else {
                        print("Error fetching document: \(error!)")
                        return
                    }
                    guard let data = userFavs.data() else {
                        print("Document data was empty.")
                        return
                    }
                    if let favorites = data["favorites"] as? [String: Any] {
                        if let favItem = favorites[docId] as? [String: Any] {
                            if let fav = favItem["itemActive"] as? Bool {
                                if fav {
                                    if let itemDate = favItem["itemAdded"] as? Timestamp {
                                        let thisDate = itemDate.dateValue()
                                        self.favorites.append(FavoriteItem(id: docId, itemType: itemType, itemImage: itemImage, itemTitle: itemTitle, itemAuthor: itemAuthor, itemDate: thisDate))
                                        DispatchQueue.main.async {
                                            self.favorites.sort(by: { $0.itemDate > $1.itemDate })
                                        }
                                    }

                                }
                            }
                        }
                    }
                }
                
            }
        }
    }
    
}`

Hi, thanks for this library.

I want to ask you something, When I put WaterfallGrid inside scrollview, the grid just disappears. How I can fix that?

var body: some View {
        GeometryReader { geometry in
            ScrollView(.vertical) {
                Text("Hello")
                WaterfallGrid((0..<10), id: \.self) { index in
                  Image("swift_logo")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                }
                .gridStyle(
                  columnsInPortrait: 2,
                  columnsInLandscape: 3,
                  spacing: 8,
                  padding: EdgeInsets(top: 16, leading: 8, bottom: 16, trailing: 8),
                  animation: .easeInOut(duration: 0.5)
                )
                .scrollOptions(
                  direction: .horizontal,
                  showsIndicators: true
                )
                Text("Hello")
            }
        }
    }

              Group {
                       WaterfallGrid(viewModel.categories) { category in
                          CategoryItem(category: category)
                       }
                       .gridStyle(columns: 3)
                    
                      WaterfallGrid(viewModel.products) { product in
                           ProductCell(product: product)
                      }
                      .gridStyle(columns: 2)
                   }

When I use 2 difference grid in same page , Layout will have two difference scroll.

What I need is only one scroll per screen.

thanks

I am having an issue where when I first come to the screen the images don't go into two columns like they should. After I navigate into one of the image items and return to the initial screen the images go into two columns.

Initial view of screen:

Navigate away from screen:

Navigate back to screen, images waterfall as they should:

My code:

` struct FavoritesView: View {

@EnvironmentObject var viewRouter: ViewRouter
@ObservedObject var favoriteItems = FavoriteItemModel()

var body: some View {
    
    HStack {
        WaterfallGrid(favoriteItems.favorites, id: \.self) { item in
            FavoriteItemView(favoriteitem: item)

        } // Waterfall
        .gridStyle(
            columnsInPortrait: 2,
            columnsInLandscape: 3,
            spacing: 8,
            padding: EdgeInsets(top: 16, leading: 8, bottom: 16, trailing: 8),
            animation: .easeInOut(duration: 0.5)
        )
        .navigationBarTitle("Favorites", displayMode: .inline)
        .onAppear(perform: getFavorites)
    } // HStack
    
}

func getFavorites() {
    favoriteItems.loadFavorites()
}

} `

` struct FavoriteItemView: View {

let favoriteitem: FavoriteItem
@EnvironmentObject var shareableItemVM: ShareableItemViewModel
@State private var showShareableModal: Bool = false

var body: some View {
    HStack{
        NavigationLink(destination: ShareableDetailView(shareableId: self.favoriteitem.id, categoryId: 0, categoryType: "", shareItemType: favoriteitem.itemType, showShareableModal: self.$showShareableModal)) {
                WebImage(url: URL(string: self.favoriteitem.itemImage))
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .cornerRadius(10)
        }
        .environmentObject(self.shareableItemVM)
        .buttonStyle(PlainButtonStyle())
    }
}

} `

I am using similar code with the WaterfallGrid in a couple other views, and I do not have this issue. The only thing I can think of is because these images are at different heights.

Any thoughts?

Hi there!

I was wondering if there is any way to disable the scrolling option and just have the stack show up? I'm trying to create a 2 by 2 grid.

WaterfallGrid((0..<4), id: .self) { index in Rectangle() .foregroundColor(Color("primary")) .cornerRadius(8) .frame(height: 125) } .gridStyle( columns: 2, spacing: 24, padding: EdgeInsets(top: 20, leading: 30, bottom: 30, trailing: 30) )

Thank you!

WaterfallGrid((0..<30), id: .self) { index in CategoryBook().gesture(LongPressGesture(minimumDuration: 0.5, maximumDistance: 1).onEnded{ v in self.previewShow = true }) }

use LongPressGesture can't scroll

I want to allow elements to be top-left instead of centered if there is only one element. Is this the right approach? Should there be an style option for this?

When i add more image in my @state variable it scrolls down 🤔

import SwiftUI
import Alamofire
import WaterfallGrid

struct HomeScreen: View {
    
    @State var newPhotos: [HomeImage] = []
    @State var pageNumber : Int = 1
    @State var isPageRefreshing : Bool = false
    @State var didAppear = false
    
    @StateObject var homeImageVm = HomeScreenViewModel()
    
    var body: some View {
        NavigationView {
            ScrollView(.vertical, showsIndicators: false) {
                LazyVStack {
                    WaterfallGrid(newPhotos) { item in
                        NavigationLink(destination:
                                        SelectedImage(image: SelectedImageClass(id: item.id, createdAt: item.createdAt, updatedAt: item.updatedAt, promotedAt: item.promotedAt, width: item.width, height: item.height, color: item.color, blur_hash: item.blur_hash, homeImageDescription: item.homeImageDescription, altDescription: item.altDescription, description: item.description, urls: item.urls, user: item.user, categories: item.categories))
                        ) {
                            AppNetworkImage(imageUrl: item.urls?.small ?? "")
                        }
                    }
                    .gridStyle(
                        columnsInPortrait: 2,
                        columnsInLandscape: 3,
                        spacing: 8,
                        animation: .linear(duration: 0.5)
                    )
                    .scrollOptions(direction: .vertical)
                .padding(EdgeInsets(top: 16, leading: 8, bottom: 16, trailing: 8))
                }
                Button("Load More") {
                    
                    getHotPhotos(page: pageNumber)
                }
                .padding()
            }
            .onAppear(perform: {
                if !didAppear {
                    getHotPhotos(page: pageNumber)
                }
                didAppear = true
            })
            .navigationBarTitle("Home", displayMode: .automatic)
            .navigationBarItems(
                trailing:
                    NavigationLink(destination:
                                    SearchImageScreen()
                                  ) {
                                      Image(systemName: "magnifyingglass")
                                  }
            )
        }
    }
    
    func getHotPhotos(page:Int) {
        let parameters: [String: Any] = [
            "client_id" : AppConst.clinetid,
            "order_by": "latest",
            "page":String(page),
            "per_page":"20"
        ]
        AF.request(AppConst.baseurl+AppConst.photoUrl,method: .get,parameters: parameters).validate().responseDecodable(of: [HomeImage].self) { (response) in
            guard let data = response.value else {
                isPageRefreshing = false
                return
            }
            withAnimation {
                newPhotos.append(contentsOf: data)
                isPageRefreshing = false
                pageNumber = pageNumber + 1
            }
        }
    }
}

struct HomeScreen_Previews: PreviewProvider {
    static var previews: some View {
        HomeScreen()
    }
}

https://user-images.githubusercontent.com/47414322/167401963-fb65a06d-ebf5-418e-8fbf-f9cf07fbaa05.mp4

var coverRow: some View {
        VStack {
            if selectedTask.taskCover != nil {
                Image(uiImage: selectedTask.tTaskCover)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .cornerRadius(CGFloat.bl_4.double)
                    .blendMode(colorScheme == .dark ? .screen : .normal)
                    .opacity(colorScheme == .dark ? 0.75 : 0.85)
            } else {
                Button(action: {
                    isShowingImagePicker = true
                }, label: {
                    RoundedRectangle(cornerRadius: CGFloat.bl_4.double)
                        .fill(Color.s_c.opacity(0.35))
                        .frame(height: 180)
                        .overlay(Image(systemName: "photo").modifier(SK_20(textColor: Color.t_t_c, weight: .regular)))
                })
            }
        }
    }

Hi, I am using the WaterfallGrid to layout thumbnails of different aspect ratios. The data (including the JPEG data for the thumbnail images) comes from a local database (using GRDB). But it is read synchronously on the main thread, and the order (and content) of the displayed items does not change. However the layout does. Sometimes it displays correctly, sometimes it does not (thumbnails overlap). See attached video where I switch back and forth between tabs of the app (not an actual TabView, the tab content is recreated from scratch each time).

The following error/warning shows up in the Xcode console when the thumbnails end up overlapping, but not when the layout works correctly:

Bound preference ElementPreferenceKey tried to update multiple times per frame.

Any idea what is causing this, and how I could fix it?

Btw, as you can see in the video, the layout always animates on initial display. Is that by design? And can that be disabled, ideally without disabling animations during changes?

https://user-images.githubusercontent.com/368964/165420456-8e23a750-b1f7-4ace-b409-6b8bf8197a1f.mov

Hi, I was making an app and I am using Kingfisher, it is to use Url instead of images, the Url becomes an image after being published. I was using the Waterfall Grid but it won't let me use the Kingfisher. How can I do it?

When "cards" count equals 1 or 2, the grid does not show the images of either asset. Only the title and subtitle get displayed.

Example when card count = 1

Example when card count = 2

Example of card count = 3