I have a list with a nested ForEach loop that should take the data and stop producing rows once the row counter hits three, but I’m receiving the following error message
Type ‘()’ cannot conform to ‘View
Is it possible to cut off the loop once we have three rows displaying? My end goal is once three rows are displayed, to show a "View More" button.
import SwiftUI
struct RecipeListView: View {
@State var listofRecipes: [RecipeListModel] = RecipeList.recipes
@State private var recipeCounter = 0
init(){
UITableView.appearance().backgroundColor = .clear
}
var body: some View {
VStack{
Text("Recipes")
.padding(.bottom, -20)
//.padding(.top, 40)
.font(.title2)
List{
ForEach(listofRecipes, id: .id){ recipe in
recipeCounter += 1
if(recipeCounter < 3){
HStack{
Image(recipe.image)
.resizable()
.frame (width: 70, height:70)
.cornerRadius(15)
VStack{
Text(recipe.name)
.font(.title2)
//temp solution until I can center it
.padding(.trailing, 25)
NavigationLink(destination: {RecipeController(name: recipe.name, image: recipe.image)}, label: {
Text("View Recipe")
.padding(5)
.foregroundColor(.black)
.background(Color("completeGreen"))
.frame(maxWidth: .infinity)
.cornerRadius(14)
})
.padding(4)
}
}
}
}
}
}
}
}
3
Answers
Your type cannot conform to view because you can’t change the variables in the view. You can declare
let
, useif
orswitch
, but you can’t declare avar
or change the value directly – so,recipeCounter += 1
is not allowed.One solution is to create a temporary list that contains only the first 3 items, then change it to the full list after the user decides to see the rest.
The example below has some explanations of what each part of the code does:
As @HunterLion mentioned, the problem is caused by
recipeCounter += 1
.Another way to solve this is to use the list index directly in your condition:
Another alternative to what the two others said is to use the .prefix modifier on
listofRecipes
. This will return a subsequence of your array with the first n elements.