Proper usage of NavigationLink?

[andreykats]

Can you please elaborate on the usage of NavigationLink with QGrid?

NavigationLink does not seem to be working here.

[karolkulesza]

Hi there,

Feel free to contribute to this project by creating a PR, if you see there is any issue. I'm currently focused on QDesigner Beta (https://Q-Mobile.IT/Q-Designer).

Best, Karol

[suneelseelam]

Great Work

Can I know how to add action on cell tap?

[AfroCyberGuy]

NavigationLink seem not to be doing good, when the view loads cells all of them turn into blue. ` VStack{

            if networkManager.loading{

                Text("Loading movies")
            }else{

                QGrid(networkManager.movies.results, columns: 3){movie in
                    NavigationLink(destination: MovieDetails(movie: movie)){

                    QGridCell(movie: movie)

                    }

                }

                }

}`

[arquehi]

some problem like you, how to fix it

[gatamar]

I resolved this issue in my project. It has nothing to do with QGrid. Your QGridCell should look like this:

struct GridCellButton: View {
    var imageName: String
    var text: String

    var body: some View {
        VStack(alignment: .center) {
            Image(self.imageName)
            .renderingMode(Image.TemplateRenderingMode?.init(Image.TemplateRenderingMode.original))
            .resizable()
            .scaledToFit()
            .shadow(color: .primary, radius: 5)
            Text(self.text).lineLimit(1)
        }
    }
}

struct QGridCell: View {
  var book: Book

  var body: some View {
    NavigationLink(destination: DetailView()) {
        GridCellButton(imageName: book.imageName, text: book.bookName)
    }

Please note setting a rendering mode for your image: .renderingMode(Image.TemplateRenderingMode?.init(Image.TemplateRenderingMode.original))

By default, "linking" controls are blue (e.g. text below the image), so the image is also blue. When you specify the rendering mode, image will be rendered well.

[karolkulesza]

As pointed above, the root cause of this issue lies in the default renderingMode of an image. You should specify the following for your images within the cell:

.renderingMode(.original)

Here is a working sample of the GridCell from QGridTestApp:

struct GridCell: View {
  var person: Person

  var body: some View {
    NavigationLink(destination: DetailView()) {
      VStack() {
        Image(person.imageName)
          .renderingMode(.original)
          .resizable()
          .scaledToFit()
          .clipShape(Circle())
          .shadow(color: .primary, radius: 5)
          .padding([.horizontal, .top], 7)
        Text(person.firstName).lineLimit(1)
        Text(person.lastName).lineLimit(1)
      }
      .font(.headline).foregroundColor(.black)
    }
  }
}