试图使3列可删除按钮的行，但按钮的第一行不可删除

Posted 2023-02-24

【中文标题】试图使3列可删除按钮的行，但按钮的第一行不可删除

【英文标题】：Tried to make rows of 3-column deletable buttons, but the first row of the buttons are not deletable

【发布时间】：2020-06-15 15:59:12

【问题描述】：

这篇文章与this相关。在 3 列按钮上制作行后，当点击“删除按钮”时，当点击“垃圾”图像时，前 3 个按钮不可删除。但是，可以删除第二行按钮（即 tag4）。知道这里出了什么问题吗？所有按钮都应该是可删除的。

这是代码

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
//                    Spacer()
                    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)
//                                        makeView2(row: row, column: column, someData: self.someData, isEdit: self.$isEdit)
                                    
                                
                            .id(UUID())
                        



                    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, 3)
                                    .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)
       

【参考方案1】：

您遇到的问题可能是因为顶部按钮的覆盖与NavigationView 标题栏重叠，这将阻止按钮输入。

如果您为VStack 添加一些背景颜色，您会看到顶部按钮的垃圾按钮实际上是在 VStack 之外：

NavigationView 
    VStack 
        ...
    
    .background(Color.red)

其中一种解决方案是通过删除此行将垃圾图像移到更靠近按钮中间的位置：

.alignmentGuide(.top)  $0[.bottom] 

或者，您可以确保您的回收站按钮不会与NavigationView 标题栏重叠。例如，您可以在 VStack 上方添加一个小空间，以使您的垃圾按钮适合其中：

NavigationView 
    VStack 
        Spacer()
            .frame(height: 10)
        VStack 
        ...
    

.padding也可以得到同样的结果：

Button(action:  ) 
    ...

.buttonStyle(...)
.overlay(...)
.padding(.top, 20)

【讨论】：

感谢您的提示。我无法删除此行 .alignmentGuide(.top) $0[.bottom] 因为我希望垃圾桶按钮稍微显示在按钮上方。我想添加 Spacer().frame(height:10) 是个好主意！