SWIFTUI-使用搜索栏、文本和按钮创建ForEach

我正在建立一个列表，其中应该有100多个元素（在未来），但对齐似乎不起作用

目前我有这个

我认为它看起来很不错，但问题是，当你点击一个元素（不管是哪一个）时，每个元素都会被点击。。。我用print命令测试了这个。

搜索栏工作得很好，除了隐藏头部——但这不是现在的问题

搜索项目时，将显示正确的项目，单击该项目，将显示正确的命令

我在寻找我的错误，但我找不到。。也许你们可以帮我：-）

这是我的密码

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())
                }
             }
    }
}

---

谢谢你们，圣诞快乐！：-）

发生这种情况是因为：

List {
 VStack{
  //.... ForEach loop
 }
}

这样，列表只包含一个元素，即

VStack

为了避免这种情况，您的代码应该如下所示：

List {
 ForEach(myArray.filter{$0.hasPrefix(searchText) || searchText == ""}, id:\.self)
   { searchText in
      CardView(searchText: searchText)
    }
 }