When i try to put a Circle() or Rectangle() inside the gridview these items do not show. When I add a button or text, they do show. Any idea what can be wrong?

Btw .. When pairing the circle with text or button in a stack, both items show.

Firstly thanks for sharing this!

Say I have a grid of 15 items with minWidth 100, and they layout nicely in 3 columns. Now if I filter them into 1 item, then only the center column is shown with that item (which is correct). Upon tapping on the item I push a view, then when the view pops and I clear the filter so items are back to 15, the resulting grid would still retain the 1 column width and won't expand back into the full view.

A google search yields many SO posts about the issue e.g. https://stackoverflow.com/questions/56534772/foreach-inside-scrollview-doesnt-take-whole-width

Setting GeometryReader's width into the VStack solves the problem.

This PR also adds edgeInsets so can specify spacing on each side.

Great Framework, For my App, I'm trying to recreate a similar Card design you used in the Preview Pictures for this library. Could you share the code you used to create the Card Views? Would be really Awesome

Thanks Alot!

Hi @pietropizzi, it's me again. Thanks for your quick reaction this morning!

We might need another release as stride doesn't work that well when the requested size is zero.

I tested this now against my use case and there are no errors/crashes anymore. 🤞

Hello there and thanks for this great library. Still got to support iOS 13 so I am glad it exists.

I've stumbled upon the issue of negative frame sizes being requested myself when using the GridStack inside a NavigationView (see related Apple Forum Thread). This is in line with the issue that has already been reported here: https://github.com/pietropizzi/GridStack/issues/16.

The provided fix is quite simple. Please let me know what you think. Cheers!

The library is based on ScrollView, which by default is full-screen height. Is there a better way to make its height as compact as possible without manually assigning frame height?

Why not create a smooth animation for this framework. My Requirement: When the device rotated, all of the grid will move smoothly to its new position.

Thanks.

I have this simple code to test your GridStack, but it doesn't work as I wish.

import GridStack
import SwiftUI

struct ContentView: View {
    
    let singers = ["Andrea","Alessia","Kofi", "Abena", "Efua", "Kweku", "Akosua", "Alberto", "Erika", "Antonio", "Anastasia","Annarita","Anna"]
    
    @State var groupedByFirst: [Character : [String]] = [" " : [""]]
    
    var body: some View {
        ForEach(self.groupedByFirst.keys.sorted{$0<=$1}, id: \.self) { char in
            Section(header: Text("Section: \(String(char))")) {
                NavigationView{
                    GridStack(minCellWidth: 100, spacing: 5, numItems: self.groupedByFirst[char]!.count, alignment: .leading) { index, width in
                        NavigationLink(destination: Text(self.returnArrayOfString(char: char)[index])) {
                            CellView(string: self.returnArrayOfString(char: char)[index])
                        }
                    }
            }
            .navigationViewStyle(StackNavigationViewStyle())
        }
        .onAppear {
            self.groupedByFirst = Dictionary(grouping: self.singers, by: { $0.first! })
        }
    }
   
    func returnArrayOfString(char:Character) -> [String] {
        return self.groupedByFirst[char]!
    }
}

I wish the items (for example the images) were presented as in Photos (for example for the dates) and by clicking on it you can switch to another view, but I cannot make it work. Can You help me?

It looks like this project works just fine on macOS and tvOS SwiftUI, it just needs to have support added for it in the Package.swift file.

(watchOS has issues running the tests on my machine so I'm not enabling it here, but feel free to add it if it's running for you and it works)

Hi @pietropizzi, it's me again. Thanks for your quick reaction this morning!

We might need another release as stride doesn't work that well when the requested size is zero and, in addition to that, using zero as the columnWidth is a problem as well.

I tested this now against my use case and there are no errors/crashes anymore. 🤞

struct ContentView: View {
    
    // Setup
    init() {
        UITableView.appearance().backgroundColor = .clear
        // UITableViewCell.appearance().backgroundColor = .clear
    }
    
    var body: some View {
        NavigationView{
            Sidebar()
                .navigationTitle("Recon")
            GridStack(minCellWidth: 300, spacing: 2, numItems: 15) { (index, cellWidth) in
                Text("\(index)")
                    .frame(width: cellWidth, height: 100)
                    .background(Color.blue)
            } 
        }
    }
}

Hi!

So I'm in a situation where I want a horizontal list of items that also stack verticaly when too much items are sent to it, and your tool is perfect for that job <3

...but! I also want it to be on top of a multiline text view, so I put both in a VStack.

The thing is that by doing that, the GridStack and the text view take each half the VStack's height. I looked into the GridStack's code because I expected it to take as small space as possible but I came accros a GeometryReader surrounding the elements, and this is understandable because you need to know the available width to work. But I know the GeometryReader doesn't shrink to it compact size but rather always take all the space it can, wether its content takes less or not. And it all made sense then!

I've copied your GridStack locally in my project to work on it, and by removing the GeometryReader and sending the width to the GridStack (and removing the ScrollView too because of the same behavior), it all worked perfectly for my intention!

So here is (finaly) my proposal:

• making the scroll feature optional
• removing the GeometryReader and let the "upper" view sending the desired width to the GridStack
• (optionnaly, for the sake of easing the use of most cases) using an enum as the width with a case like "auto" that will add your current GeometryReader so that the "upper" view won't have to use a GeometryReady if it deosn't need to

Here is the result I targeted, the GridStack is (obviously) the row of circles

I am looking for a SwiftUI component like LazyGrid (https://stackoverflow.com/questions/62606907/swiftui-using-ondrag-and-ondrop-to-reorder-items-within-one-single-lazygrid), but needs to be forward compatible with iOS 13.x or macOS 10.15.x.

Does GridStack have this feature please?

My cell looks like this:

struct CollectionCell: View {
    var type: PokemonTypes
    
    var body: some View {

        HStack {
            Image(type.imageName)
            
            Divider()

            GeometryReader { geometry in

                GridStack(minCellWidth: geometry.size.width / 2,
                          spacing: 0,
                          numItems: self.type.superEffectiveAgainst.count) { index, cellWidth in
                    
                            Image(self.type.superEffectiveAgainst[index].imageName)
                            .frame(width: cellWidth)
                }
            }
        }
    }
}

And it looks like that in the preview:

The problem is that it shows only one row and I can scroll inside the table row when there are more than 2 items. How can I expand the GridStack to its full height?

Thanks!