尝试制作3列可删除按钮的行，但此处不起作用 [英] Tried to make rows of 3-column deletable buttons, but something doesn't work here

问题描述

我试图在VStack中制作多行3列按钮.它在此帖子中，重新编写了解决方案以使按钮显示在3列的行中之后，它不再起作用-当我单击删除按钮"时，附加的废纸image不会出现在每个按钮上.这里有什么问题吗?

I tried to make multiple rows of 3 columns buttons in a VStack. It worked in this post, after I rewrote the solution to make the buttons to appear in a row of 3 columns, it didnt work anymore - when I click the 'Delete Button', the additional trash image will not appear on each button. Anything goes wrong here?

class SomeData: ObservableObject{
    @Published var buttonObjects: [ButtonObject] = [ButtonObject(name: "tag1", isSelected: false),
                                                   ButtonObject(name: "tag2", isSelected: false), ButtonObject(name: "tag3", isSelected: false), ButtonObject(name: "tag4", isSelected: false)]
    }

struct someData3: View {
    @Environment(\.editMode) var mode
    @ObservedObject var someData = SomeData()
    @State var newButtonTitle = ""
    @State var isEdit = false

    var body: some View {
        NavigationView{
//            List{ // VStack
                VStack{
                    VStack(alignment: .leading){
                            ForEach(0..<someData.buttonObjects.count/3+1) { row in // create number of rows
                                HStack{
                                    ForEach(0..<3) { column in // create 3 columns
                                        self.makeView(row: row, column: column)
                                    }
                                }
                            }
                        }



                    HStack{
                        TextField("Enter new button name", text: $newButtonTitle){
                            let newObject = ButtonObject(name: self.newButtonTitle, isSelected: false)
                            self.someData.buttonObjects.append(newObject)
                            self.newButtonTitle = ""
                        }
                    }

                    Spacer()

                    HStack{
                        Text("isEdit is ")
                        Text(String(self.isEdit))
                        }
                }
                .navigationBarItems(leading: Button(action: {self.isEdit.toggle()}){Text("Delete Button")},
                                 trailing: EditButton())


                }




    }


    func makeView(row: Int, column: Int) -> some View{
        let ind = row * 3 + column
        return Group{
            if ind<self.someData.buttonObjects.count {
                   Button(action: {
                    self.someData.buttonObjects[ind].isSelected = !self.someData.buttonObjects[ind].isSelected
                    print("Button pressed! buttonKeyName is: \(self.someData.buttonObjects[ind].name) Index is \(ind)")
                    print("bool is \(self.someData.buttonObjects[ind].isSelected)")

                   }) {

                    Text(self.someData.buttonObjects[ind].name)

                   }
                   .buttonStyle(GradientBackgroundStyle(isTapped: self.someData.buttonObjects[ind].isSelected))
                    .overlay(Group {
                         if self.isEdit {
                             ZStack {
                                 Button(action: {self.deleteItem(ind: ind)}) {
                                    Image(systemName: "trash")
                                         .foregroundColor(.red).font(.title)
                                 }.padding(.trailing, 40)
                                    .alignmentGuide(.top) { $0[.bottom] }
                             }.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing) //topTrailing

                            }
                        }
                    )
                   .padding(.bottom, 20)


            }
            else{
                EmptyView()

            }
        }

    }


    func deleteItem(ind: Int) {
        let name = someData.buttonObjects[ind].name
        print(" deleting ind \(ind), key: \(name)")
        self.someData.buttonObjects.remove(at: ind)
       }


}

推荐答案

您可以在 ForEach 的末尾添加一个显式的 .id -因为您正在使用一个静态的 ForEach ，您可能需要强制刷新它.

You can add an explicit .id at the end of the ForEach - since you're using a static ForEach you may need to force refresh it.

在上一篇文章中，您使用了动态的 ForEach (带有 id 参数).这就是它起作用的原因.

In your previous post you used a dynamic ForEach (with the id parameter). That's why it worked.

ForEach(0 ..< someData.buttonObjects.count / 3 + 1) { row in // create number of rows
    HStack {
        ForEach(0 ..< 3) { column in // create 3 columns
            self.makeView(row: row, column: column)

        }
    }
}
.id(UUID()) // <- add this line

这篇关于尝试制作3列可删除按钮的行，但此处不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！