SWIFTUI

Question

我正在构建一个应该有超过 100 个元素（将来）的列表，但对齐似乎不起作用..

目前我有这个...

我认为它看起来很漂亮 atm - 但问题是，当您单击一个元素时（哪个元素无关紧要）每个元素都会被单击...我通过打印命令对此进行了测试。

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

当您搜索某个项目时，将显示正确的项目，单击它会出现正确的命令...

我正在寻找我的错误，但我找不到..也许你们可以帮助我:-)

这是我的代码...

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{[=10=].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())
                }
             }
    }
}

谢谢你们，祝你们快乐x-mas！:-)

Answer 1

发生这种情况是因为：

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

就像列表只包含一个元素，即 VStack

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

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

SWIFTUI - 创建带有搜索栏、文本和按钮的 ForEach

SWIFTUI - creating a ForEach with Searchbar, text and button

swiftui-list