I have a macOS app that I'm adding Grid to, but when I pass in new data, the grid is not refreshed.

However, if I switch to using LazyVGrid, it does refresh. So I know the data is getting to the SwiftUI view. I'm integrating Grid using an NSHostingController and I'm monitoring changes to my object using @ObjectBinding. Anything outside the Grid will update when I change objects, but anything within the Grid does not.

Think of a master/detail view. The master is an AppKit NSTableView that shows a list of records. The detail view is my SwiftUI view that's using Grid to display a list of fields on screen. But when I switch records, the SwiftUI view's Grid never refreshes.

I am still a SwiftUI newbie for sure, but I just could not figure out how to easily align cell contents, to change from centered.

For example, in below I would like "A" to right align in the cell:

struct GridIssue2View: View {
    var body: some View {
        Grid(tracks: [
            .fit, // label
            .fit, // value
        ], spacing: 5)
        {
            Text("A")
            Text("B")
            Text("CCCCC")
            Text("D")
        }
        .frame(width: 100, height: 50)
        .border(Color.blue, width: 1)
    }
}

I tried swapping out Text("A") with:

            HStack
            {
                Spacer()
                Text("A")
            }

Thinking that might push the A over. But it yielded:

Thank you for any possible help!

When the grid is placed inside a scrollview, the grid just disappears.

import SwiftUI
import ExyteGrid

struct ContentView: View {
    
    var body: some View {
        
        ScrollView {
            Grid(array, id: \.id, tracks: [.fit, .fit], spacing: 20) { user in
                VStack {
                    Text(user.name)
                        .font(.largeTitle)
                    
                    Text(user.image)
                        .font(.largeTitle)
                        .background(Color.orange)
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct User: Identifiable {
    let id = UUID().uuidString
    let name: String
    let image: String
}

var array = [
    User(name: "Hello", image: "😀"),
    User(name: "No one here", image: "😆"),
    User(name: "Hello", image: "😀"),
    User(name: "No one here", image: "😆"),
    User(name: "Hello", image: "😀"),
    User(name: "No one here", image: "😆"),
    User(name: "Hello", image: "😀"),
    User(name: "No one here", image: "😆"),
    User(name: "Hello", image: "😀"),
    User(name: "No one here", image: "😆"),
]

When using a resizable Image with .aspectRatio(contentMode: .fill), the image may not be correctly displayed.

Here's a code example to reproduce the issue:

Grid(tracks: 3) {
    ForEach(0 ..< 7) { i in
        Image("ExampleImage")
        .resizable()
        .aspectRatio(contentMode: .fill)
    }
}
.gridContentMode(.scroll)

With ForEach(0 ..< 1), the image fills the whole width of the grid container (instead of just one column).

The more rows are added, the more zoomed in the images become.

With 10 rows, only a single pixel of the image is visible, filling the entire screen.

It would be great if Grid could target support for macOS. It seems to support Catalyst, but that is not good enough for a native Mac app.

I took a stab at it and was able to add macOS support pretty easily. Unfortunately Xcode messes with so many project settings (and I don't know your preferred setup/naming) so it would probably be easier if you just addressed this on your end.

Steps to add Mac support:

1. Add macOS Framework target
2. Add all source files
3. Mac's dont have didReceiveMemoryWarningNotification. Find another solution for the layout cache.
4. Update Package.swift to add platform
5. Address some minor issues with examples using UIColor etc.
6. Done!

If the grid view is conditionally rendered, we have to manually assign its height.

Here is code snippets

// Use Grid in child view

struct RaceRunnerForm: View {
    @State private var isShownFullForm = false
    var body: some View {
        VStack(alignment: .leading, spacing: 5) {
            Text("Comments").bold()
            Divider()
            
            Grid(0..<formItemCount, tracks: 2, spacing: 10) { index in
                HStack(alignment:.center) {
                    Text("\(self.formLabelArray[index])")
                    Spacer()
                    Text(self.formDataArray[index])
                }
                .frame(height: 37)
            }.padding(.leading, -10).padding(.trailing, -10)
             .frame(height: 300) // have to assign height explictly
        }
    }
}

// Call from the parent view

@State private var isExpanded = false  // `Conditionally rendering`
var body: some View {
        VStack {
            HStack {
                VStack(spacing: 10) {
                VStack(alignment: .leading) {
                    Text(entrant.name).bold()
                }
            if isExpanded { 
                RaceRunnerForm()
            }
        }
    }

Like in the Fitbit app it would be nice to make them re-adjustable - going to use your library for showing dynamic data so would be an appreciated feature if you could move around the "block" on the Grid.

Great library, thanks!

Hi, Adding view(ex: button ) with a if statement of a @State boolean value is not working inside of Grid with forEach. What can I do about it? Any idea?

Hello. I using Grid for some iOS14 widgets. I am running into this:

SwiftUI is throwing up a warning per https://stackoverflow.com/questions/63135404/why-do-some-views-appear-as-a-red-no-entry-sign-in-widgets. The Grid's ScrollView was the issue.

I believe ScrollView would only be needed in .gridContentMode(.scroll) mode. As a quick hack I commented out the ScrollView in Grid and all seems good.

I am fairly new to both Swift and SwiftUI as assume you would have a much more elegant real fix than I could provide. I won't need scrollable maybe ever for my project. But I could take a crack at a "real" fix.

Love the Grid! Thank you!!

When attempting to render a scrollable grid in a navigation view with a navigation bar item, I get the following error: " precondition failure: invalid input index: 2". I've been able to run it successfully without the navigation bar item and still with a navigation bar title, but as soon as I add the item back in it fails.

I can render the grid view without being scrollable and with the navigation bar item there and it works as expected.

Here is my view with the grid:

struct ListView: View {
    
    private let elements = ElementsModel()
    @State private var showSheet = false
    
    var body: some View {
        NavigationView {
            Grid(elements.elements, tracks: 3) {element in
                SquareView(element: element, showElementName: true)
            }
            .gridContentMode(.scroll)
            .edgesIgnoringSafeArea(.all)
            .navigationBarTitle("🧪 Elements")
            .navigationBarItems(trailing:
                Text("Test")
            )
        }
    }
}

Here is the SquareView that is inside the body:

struct SquareView: View {
    
    let element: Element
    let showElementName: Bool
    
    var body: some View {
        VStack {
            Text("\(element.number)")
                .frame(maxWidth: .infinity, alignment: .leading)
            
            Text(element.symbol)
                .bold()
                .font(.system(size: 50))
            
            Group {
                if showElementName {
                    Text(String(element.name))
                        .bold()
                } else {
                    if element.atomicMass != nil {
                        Text(String(element.atomicMass!))
                    }
                }
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .modifier(OneLineText())
        .aspectRatio(1, contentMode: .fit)
        .foregroundColor(.white)
        .padding(5)
        .background(elementColor[element.category])
    }
}

Please let me know if there are any debugging tasks I can do to provide more information

Hi,

I was wondering if it is possible to change the column span of a cell dynamically as you change the flow in the documentation: https://github.com/exyte/Grid#columns?

Awesome library guys!

Would it be possible to use the Grid to make a TextEditor with multiple columns, like on Apple Pages for example?

I tried bellow, but have no idea how to make this work...

import SwiftUI
import ExyteGrid


struct ContentView: View {

    let inputText = "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
    
    var body: some View {

        Grid(tracks: 2) {
          Text(inputText)
        }
    }
}

Issue

Scaling a view within the Grid causes incorrect overlay.

Description

I attempted to manipulate the zIndex by wrapping my Grid Item View in a ZStack and changing the zIndex whenever that particular view scaled.

However, it does not appear to have any effect.

Details

Here is a sample code snippet of my Grid implementation:

    var body: some View {
        Grid(tracks: layout.tracks) {
            ForEach(viewModel.items, id: \.self) { item in
                ZStack {
                    LayoutItem(item, action: { action in
                        viewModel.handle(action, for: item)
                    })
                }
                .zIndex(item.zIndex)
                .gridSpan(column: item.type.column,
                          row: item.type.row)
            }
        }
        .gesture(drag)
        .coordinateSpace(name: GridLayout.NAME_SPACE)
    }

Here is a code snippet of my toggle scale logic

    public func handle(drag location: CGPoint?) {
        for var item in items {
            var inBounds = false
            var scale: GridLayoutItemScale = .normal
            var zIndex: Double = 0
            if let location = location {
                inBounds = item.bounds.contains(location)
                scale = inBounds ? .large : .normal
                zIndex = inBounds ? 1 : 0
            }
            item.scale = scale
            item.zIndex = zIndex
            setItem(item)
        }
    }

Demo

Conclusion

I looked through the documentation and wasn't able to find anything specific to zIndex manipulation.

Is it possible to alter the zIndex for Grid Items within the Grid to avoid bottom overlay?

If not, it would be a great addition to this package! I've been using it a lot and it is FANTASTIC!

Hello, I use a @State variable to control display Grid, like this:

if(unit == "w"){
    Grid(tracks: 3) {
        ForEach(weekSelectArr.indices){item in
            Toggle(isOn: self.$weekSelectArr[item]) {
                Text(weekdays[item])
                    .frame(height:50)
            }.toggleStyle(GridToggleStyle())
        }
    }.frame(height:200)
}

When the view appear, it shows like this: only show one item.

When I click the item, it come back into grid:

Their parent view is a Form->Section.

I have a problem where the elements of the grid are overlapping. My code is:

var body: some View {
     ScrollView {
            VStack(alignment: .leading) {
                Group {
                    Text("Letters en woorden")
                        .font(.title)
                    Grid(tracks: 3) {
                        Text("_eererer_")
                        Text("_eererer__")
                        Text("_eererer_")
                        Text("_eererer_")
                        Text("_eererer_")
                        Text("_eererer_")
                    }
                // ...
                }
            }.padding(.bottom)
     }.navigationTitle("Morse")
       .padding(.horizontal)
}

This is how my view look

Here is my code:

Grid(store.state.categories, id: \.id, tracks: 2) { category in
      SectionView( text: category.name)
}.gridContentMode(.scroll)

When I do it with List there is no issue, no lags. Would be happy if you can let me know if there is something that I missed.

Thanks