SWIFTUI - creating a ForEach with Searchbar, text and button - swiftui

Question

I am building a list which should have more than 100 elements (in the future) but the alignment seems not to work..
Currently i have this...
I think it looks pretty nice atm - but the problem is, when you clicked an element (it doesnt matter which one) every element will be clicked... I tested this by print command.
The searchbar works pretty fine, except from hiding the head - but that is not the problem right now..
When you search for an item, the correct item will be displayed and by clicking on it, the correct command appears...
I am looking for my mistake, but i cant find it.. Maybe you guys can help me :-)
This is my code...
struct RecipeIngredientsView: View {
let myArray = ["Dennis", "Tessa", "Peter", "Anna", "Tessa", "Klaus", "Xyan", "Zuhau", "Clown", "Brot", "Bauer"]
#State private var searchText = ""
#State private var showCancelButton: Bool = false
var body: some View {
VStack
{
HStack
{
HStack
{
Image(systemName: "magnifyingglass")
TextField("Suche", text: $searchText, onEditingChanged: { isEditing in self.showCancelButton = true}, onCommit: {
print("onCommit")
}).foregroundColor(.primary)
Button(action: {
self.searchText = searchText
}){
Image(systemName: "xmark.circle.fill").opacity(searchText == "" ? 0 : 1)
}
}.padding(EdgeInsets(top: 8, leading: 6, bottom: 8, trailing: 6))
.foregroundColor(.secondary)
.background(Color(.secondarySystemBackground))
.cornerRadius(10.0)
if showCancelButton {
Button("Abbrechen")
{
UIApplication.shared.endEditing(_force: true)
self.searchText = ""
self.showCancelButton = false
}
.foregroundColor(Color(.systemBlue))
}
}
.padding(.horizontal)
.navigationBarHidden(showCancelButton)
List {
VStack{
ForEach(myArray.filter{$0.hasPrefix(searchText) || searchText == ""}, id:\.self)
{
searchText in VStack {
CardView(searchText: searchText)
}
}
Spacer()
}
}
.navigationBarTitle(Text("Suche"))
.resignKeyboardOnDragGesture()
}
}
}
struct CardView : View
{
#State var searchText = ""
var body : some View
{
HStack{
Text(searchText)
Spacer()
Button(action: {print("\(searchText) btn pressed!")})
{
Image(systemName: "circle")
.frame(width:25, height:25)
.clipShape(Circle())
}
}
}
}
Thank you guys & merry x-mas!:-)

Answer 1

This happened because of :
List {
VStack{
//.... ForEach loop
}
}
Like that the list contains just one element , which is the VStack
To avoid this your code should be like that :
List {
ForEach(myArray.filter{$0.hasPrefix(searchText) || searchText == ""}, id:\.self)
{ searchText in
CardView(searchText: searchText)
}
}