CODEWITHSUNDEEP
swiftswiftuiswiftui-listswiftui-navigationlink
user1795832
user1795832

Reputation: 2160

SwiftUI NavigationLink style within ScrollView

I have a screen where I'm trying to display a list of NavigationLink and a grid of items (using LazyVGrid). I first tried putting everything in a List, like this:

List() {
  ForEach(items) { item in
    NavigationLink(destination: MyDestination()) {
      Text("Navigation link text")
    }
  }

  LazyVGrid(columns: columns) {
    ForEach(gridItems) { gridItem in
      MyGridItem()
    }
  }
}

However, it seems that putting a LazyVGrid in a List doesn't load the items in the grid lazily, it loads them all at once. So I replaced the List with a ScrollView and it works properly. However, I do want to keep the style of the NavigationLink that is shown when they are in a List. Basically what this looks like https://www.simpleswiftguide.com/wp-content/uploads/2019/10/Screen-Shot-2019-10-05-at-3.00.34-PM.png instead of https://miro.medium.com/max/800/1*LT7ZwIaidXrMuR6pu1Jvgg.png.

How can this be achieved? Or is there a way to put a LazyVGrid in a List and still have it load lazily?

Upvotes: 0

Views: 1358

Answers (1)

Guillermo Jiménez
Guillermo Jiménez

Reputation: 864

Take a loot at this, the List is already a built-in Lazy load scroll view, you can check that is lazy on the onAppear event

import SwiftUI
struct item:Identifiable {
    let id = UUID()
    let value: String
}

struct listTest: View {
    @State var items: [item]
    
    init () {
        var newItems = [item]()
        for i in 1...50 {
            newItems.append(item(value: "ITEM # \(i)"))
        }
        self.items =  newItems
    }
    
    var body: some View {
        NavigationView {
            List($items) { $item in
                NavigationLink(destination: MyDestination(value: item.value)) {
                    Text("Navigation link text")
                        .onAppear{
                            print("IM ITEM: \(item.value)")
                        }
                        .id(UUID())
                }
            }
        }
    }
}

struct MyDestination: View {
    
    let value: String
    var body: some View {
        ZStack{
            Text("HI A DETAIL: \(value)")
        }
    }
}

Upvotes: 0

Related Questions