GRID: gridStyle changes when there are multiple grids on the app.

[jberlana]

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.

[ay42]

@jberlana Hi,
Feels like I can be way more productive with a single repository. The idea is to have multiple packages inside a single repo.

Can you post a code snippet that produces different styles?

[jberlana]

Hello @ay42, first of all thanks for your work.

One repository is easy to mantain but also less modular, if I only need a grid I do not see the necessity to download and compile all other packages. Maybe I am doing something wrong.

About my issue.

I have 2 screens.

Screen 1: with 2 columns grid and 100px height. When an item is tapped shows Screen 2.

Screen 2: opened after user taps on an item on Screen 1. Grid with 3 columns and 200px height.

Everything works well until i go back from Screen 2 to Screen 1, when I do that the layout of Screen 1 have changed to the styles of Screen 2. It seems there is some kind of styles caching.

Code is very straight forward, just like the one on the examples. But une Grid on each View.

[jberlana]

This is the code on the first view, the grid which style gets broken.

  var body: some View {
    NavigationView {
      listItemsGrid()
        .navigationBarTitle(Text("Title"))
        .navigationBarItems(trailing: customBarItems)
    }
    .sheet(isPresented: $showingModal) {
      ListCreateForm(lists: self.$dataSource.lists, isPresented: self.$showingModal)
    }
  }
  
  func listItemsGrid() -> some View {
    return Grid(self.dataSource.lists) { listVM in
      self.listItemNavigationLink(listVM)
    }
    .gridStyle( ModularGridStyle(
      columns: 2,
      rows: .fixed(105),
      spacing: 16,
      padding: EdgeInsets(top: 16, leading: 16, bottom: 0, trailing: 16)) )
  }
  
  func listItemNavigationLink(_ listVM: ListViewModel) -> some View {
    NavigationLink(destination: ItemsListGridView(listVM: listVM) ) {
      ListItemView(listVM: listVM)
    }
    .buttonStyle(PlainButtonStyle())
  }

[ay42]

@jberlana .gridStyle overrides every style inside the scope. You can even set it in the app delegate and it will apply to every grid. In your case you just need to specify another style closer to your seconds grid like so.

  func listItemNavigationLink(_ listVM: ListViewModel) -> some View {
    NavigationLink(destination: ItemsListGridView(listVM: listVM) ) {
      ListItemView(listVM: listVM)
    }
    .buttonStyle(PlainButtonStyle())
    .gridStyle(...)
  }

Let me know if this helps.

[ay42]

btw @jberlana with the latest release it's possible to import separate products.

import Grid