SwiftUI Grid layout with custom styles

I want to show, with Grid, media from Photos Library, but I have this result.

The code is. //ContentView File

import SwiftUI
import Photos
import Grid

struct ContentView: View {
    
    @State private var assetsStruct = [AssetStruct]()
    
    var body: some View {
        NavigationView {
            ScrollView {
                Grid(assetsStruct) { assetStruct in
                    NavigationLink(destination: Text(assetStruct.asset.localIdentifier)) {
                        MediaThumbView(asset: assetStruct.asset)
                    }
                }
            }
            .onAppear {
                self.assetsStruct = FetchMediaUtility().fetchNumLastAssetsStruct(numAssets: 20)
            }
            .gridStyle(
                ModularGridStyle(columns: .min(100), rows: .fixed(100))
            )
                .navigationBarTitle("Media from Photos Library", displayMode: .inline)
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

struct MediaThumbView: View {
    let asset:PHAsset
    var body: some View {
        let manager = PHImageManager.default()
        let requestOptions = PHImageRequestOptions()
        requestOptions.isSynchronous = true
        requestOptions.isNetworkAccessAllowed = true
        var thumbnail = UIImage()        
        manager.requestImage(for: asset, targetSize: CGSize(width: 100, height: 100), contentMode: .aspectFit, options: requestOptions, resultHandler: {(result, info)->Void in
            if let result = result {
                print("Video o Image width: \(result.size.width) - height: \(result.size.height)")
                thumbnail = result
            }
        })
        return Image(uiImage: thumbnail).resizable().aspectRatio(contentMode: .fit)
    }
}

//File FetchMediaUtility

import Photos

struct AssetStruct: Identifiable {
    let id = UUID()
    let asset:PHAsset
}

class FetchMediaUtility {
    
    // Ultimi numAssets di AssetStruct
    func fetchNumLastAssetsStruct(numAssets:Int) -> [AssetStruct] {
        let fetchOptions = PHFetchOptions()
        fetchOptions.fetchLimit = numAssets
        fetchOptions.sortDescriptors = [NSSortDescriptor(key: "creationDate", ascending: false)]
        let fetchAssets = PHAsset.fetchAssets(with: fetchOptions)
        var phAssetStructArray = [AssetStruct]()
        for index in 0..<fetchAssets.count {
            let asset = fetchAssets.object(at: index)
            phAssetStructArray.append(AssetStruct(asset: asset))
        }
        return phAssetStructArray
    }
}

Is there something wrong in my code or something on the Grid? I hope someone will let me know how to make Grid work, because it is the only repositary that solves my problem.

Image and text rendered in the grid view Grid(viewModel.items){ item in NavigationLink(destination: BookDetail(displayData: item)){ SearchBookCell(displayData: item) } } .gridStyle( ModularGridStyle(columns: 2, rows: .fixed(200)) ).animation(.easeInOut)

Hello everyone, And sorry for the dumb question: How do I use this package in my app? I have Xcode 11.1 and opened the GridExamples/GridExamples.xcodeproj file. I get several errors and I cannot run any of the examples. Particularly, I want to check the iOS one. These are the errors:

Showing Recent Issues No account for team "Z8L4G5WZR3". (Add a new account in the Accounts preference pane or verify that your accounts have valid credentials.)

If I want to use this extension, how do I include it in my project? I know this is so silly, but I am working on my first projects with Swiftui and I don't have much experience with Github, so please be gentle... :) Thanks in advance!

This is a very useful project. 🙌 I use it to show a lot of images in a waterfall grid. However, the API I'm using uses pagination, so I need to load the next page from the API when the user scrolls to the bottom (actually before the bottom). Do you have any plans to add support for infinite grid? Or maybe hooks to enable this use-case?

I just don't know if SDWebImageSwiftUI causes this issue.

Grid(self.store.state.myPostsState.posts) { index in
      RoundedURLImage(imageURL: postImageURL(uid: index.reference.documentID), borderWidth: 0)
    .scaledToFit()
     .cornerRadius(18)
      .clipped()
  }
   .animation(.easeInOut)

I have a large grid of NSImageView's that play animated GIFs. This is very resource intensive, so I would like to pause playing the GIF animation for items that are outside the viewport. It would be useful if Grid could somehow expose this information.

Hello,

First of all thank you for this library.

I have 2 Grids in my app, the items on the first grid displays a second grid. This grids have different cell styles, when I go back from the second grid to the first one the style of the first one have changed, now it have the style of the second grid...

This behaviour does not exists on the previous version.

Why now on the same package there are things I am not using? Charts, Sliders and other stuff, make more sense have it separated in different packages.

Thanks for your reply.

Hello, I'm trying to set a max of 9 posts to be displayed in the Grid. I have an array of posts that have different categories, I want each category to have a total of 9 posts. How can I do that with Grid?

This is the code I'm using now

`VStack(spacing: 15){

            Grid(0..<self.userDefaultData.forSalePosts.count){ i in
                
                    if self.userDefaultData.forSalePosts[i].Category == "\(self.FirebaseRefCategory)"{
                        
                        
                                        GridCell(title: self.userDefaultData.forSalePosts[i].Title  , image: self.userDefaultData.forSalePosts[i].image)
                                        
                                        
                                        
                                    }
                
                 
            }
        .gridStyle(StaggeredGridStyle(.vertical, tracks: 3, spacing: 10))

    }`

Thanks, Hasan

How difficult would it be to make this library be able to scroll both vertically and horizontally at the same time? I think this functionality would bring the library to another level at least for my application. Would this be overly difficult to accomplish? I would contribute to that if you think it seems doable/desirable feature @ay42

I tried GridDemo iOS, the StaggeredGridStyle layout collapses in case the number of grid items is less than the number of tracks.

struct StaggeredGridView: View {
    @State var showSettings: Bool = false
    @State var style = StaggeredGridStyle(.vertical, tracks: .count(2), spacing: 1)
    @State var items: [Int] = (1...69).map { $0 }

These are screenshots of layout collapse.

• axis : .vertical
• tracks: .count(2)

| :+1: 3 items | 🤔 2 items | | :-: | :-: | | | |

Seems there's a compiler crash in the latest Swift 5.2 compiler.

I haven't yet tracked down exactly what the issue is, but it can be reproduced with simple code like:

import SwiftUI
import Grid

struct Foo: Hashable {}

struct GifsView: View {
	var body: some View {
		List([Foo()], id: \.self) { _ in
			Text("")
		}
			.gridStyle(ModularGridStyle(columns: 1, rows: 1))
	}
}

So it's definitely something in .gridStyle or GridStyle.

You can also reproduce the crash by opening the Xcode project in this repo, selecting the "GridDemo macOS" target and and then selecting the "Product => Archive" menu item.

I would recommend getting this project added to https://github.com/apple/swift-source-compat-suite