0

I have some Content inside a SwiftUI list. There is also a NavigationLink(destination, Label) wrapped around the content to let the user navigate to the Detail View when the List Item is clicked.

However, I'm unable to scroll the List unless I scroll it from the very edge of the Screen where the NavigationLink Chevron is. I've spent a few hours now trying to find a solution and tried a few ways but can't find a way around it.

I know I can use a ScrollView with ForEach though I would prefer using a List since I'm using the .onDelete() modifier to delete the tile when the user swipes left. Could somebody give me some suggestions on what I'm doing wrong and/if something I need to change.

My Code is as follows:

MyRecipesView: Note - I've skipped some Code like the @State variables and the .onAppear() modifier which has logic to get Recipe Data from the Database.

List{
                    
        ForEach(customRecipesList){ customRecipe in
               LazyVStack{
                      NavigationLink {
                           CustomRecipeDetailView(customRecipe: customRecipe)
                      } label: {
                            CustomRecipeCardView(customRecipe: customRecipe)
                                    
                            .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
                            .listRowSeparator(.hidden, edges: .all)
                            .listRowBackground(Color(white: 1.0))
                            .padding(.vertical, 10)
                            .gesture(
                             LongPressGesture(minimumDuration: 0.7)
                             .updating($press, body: { currentState, gestureState, transaction in
                                    gestureState = currentState
                             })
                             .onEnded({ value in
                                    editCustomRecipe = customRecipe
                                                
                             })
                             )//gesture
                            }//NavigationLink Label
                        }//LazyVStack
                    }

       }

RecipeCardView:

struct RecipeCardView: View {
    
    var recipe:Recipe?
    
    var body: some View {
        VStack{
            
            AsyncImage(url: URL(string: recipe?.image ?? "")) { image in
                image
                    .resizable()
                    .scaledToFit()
                    .cornerRadius(12)
            } placeholder: {
                Image("norecipe")
                    .resizable()
                    .scaledToFit()
                
            }

            
//            Image(recipe?.image ?? "norecipe")
//                .resizable()
//                .scaledToFit()
            
            VStack(alignment:.leading, spacing: 12){
                
                Text(recipe?.title ?? "Strawberry Ice Cream")
                    .font(.title.weight(.bold))
                    .foregroundColor(.green)
                    .lineLimit(1)
                
                HStack(spacing:30){
                    VStack{
                        HStack{
                            Image(systemName: "heart.fill")
                                .foregroundColor(.red)
                            Text("Likes")
                        }
                        Text("\(recipe?.aggregateLikes ?? 4)")
                    }//Rating
                    
                    VStack{
                        HStack{
                            Image(systemName: "person.2.fill")
                                .foregroundColor(.blue)
                            Text("Serves")
                        }
                        
                        Text("\(recipe?.servings ?? 2)")
                    }
                    
                    VStack{
                        HStack{
                            Image(systemName: "clock.fill")
                                .foregroundColor(.brown)
                            Text("Prep")
                        }
                        
                        Text("\(recipe?.readyInMinutes ?? 45) minutes")
                    }
                    
                    
                    
                }//Main HStack
                
            }//Recipe data Vstack
            .padding()
            
        }//VStack
        .background(.white)
        .cornerRadius(12)
        .shadow(color: .gray.opacity(0.5), radius: 8, x: 0, y: 5)
    }//body
}

UPDATE: The issue was with having the Long press gesture. I had to remove the gesture and had to implement my own SwipeAction(s). Doing so fixed the issue.

Amey079
  • 131
  • 7
  • why is your `LazyVStack` *inside* the `ForEach`? – Paulw11 Jul 31 '23 at 23:30
  • Hey @Paulw11 sorry I'm relatively new to SwiftUI and iOS Development so still learning the ropes here. Would it fix the issue if I have the LazyVStack outside the ForEach? – Amey079 Aug 01 '23 at 17:57
  • 1
    If you put LazyVStack inside ForEach, you get one different LazyVStack for each element of the ForEach which is not what you want. – Ptit Xav Aug 01 '23 at 20:45
  • That makes sense @PtitXav. So what's the best way to fix this? Could you please give me some suggestions that might work? – Amey079 Aug 01 '23 at 23:14
  • Some thought : the listitem modifier should better be applied to the list item which are the LazVStzck in your case. Also there is [swipe action modifier](https://developer.apple.com/documentation/swiftui/view/swipeactions(edge:allowsfullswipe:content:)) – Ptit Xav Aug 03 '23 at 19:02

0 Answers0