尝试使3列可删除按钮成行，但第一行按钮不可删除 [英] Tried to make rows of 3-column deletable buttons, but the first row of the buttons are not deletable

问题描述

此帖子与

这是代码

  class SomeData:ObservableObject {@Published var buttonObjects:[ButtonObject] = [ButtonObject(name:"tag1"，isSelected:false)，ButtonObject(名称:"tag2"，isSelected:false)，ButtonObject(名称:"tag3"，isSelected:false)，ButtonObject(名称:"tag4"，isSelected:false)]}struct someData3:查看{@Environment(\.editMode)var模式@ObservedObject var someData = SomeData()@State var newButtonTitle ="@State var isEdit = falsevar body:some View {NavigationView {//列表{//VStackVStack {//空格键()VStack(对齐方式:.leading){//ForEach(0 ..< someData.buttonObjects.count/3 + 1){row in//创建行数HStack {ForEach(0 ..< 3){列////创建3列self.makeView(行:行，列:列)//makeView2(row:row，column:column，someData:self.someData，isEdit:self.$ isEdit)}}} .id(UUID())}HStack {TextField(输入新按钮名称"，文本:$ newButtonTitle){让newObject = ButtonObject(name:self.newButtonTitle，isSelected:false)self.someData.buttonObjects.append(newObject)self.newButtonTitle ="}}垫片()HStack {文字("isEdit是")文字(String(self.isEdit))}}.navigationBarItems(开头:Button(操作:{self.isEdit.toggle()}){Text(删除按钮")}，尾随:EditButton())}}func makeView(row:Int，column:Int)->一些视图{让ind =行* 3 +列返回组{如果ind< self.someData.buttonObjects.count {按钮(操作:{self.someData.buttonObjects [ind] .isSelected =！self.someData.buttonObjects [ind] .isSelectedprint(按下按钮！buttonKeyName是:\(self.someData.buttonObjects [ind] .name)索引是\(ind)")打印(布尔是\(self.someData.buttonObjects [ind] .isSelected)")}){文本(self.someData.buttonObjects [ind].名称)}.buttonStyle(GradientBackgroundStyle(isTapped:self.someData.buttonObjects [ind] .isSelected)).overlay(组{如果self.isEdit {ZStack {Button(操作:{self.deleteItem(ind:ind)}){图片(系统名称:垃圾箱").foregroundColor(.red).font(.title)} .padding(.trailing，3).alignmentGuide(.top){$ 0 [.bottom]}}.frame(maxWidth:.infinity，maxHeight:.infinity，对齐方式:.topTrailing)//topTrailing}}).padding(.bottom，20)}别的{EmptyView()}}}func deleteItem(ind:Int){让名称= someData.buttonObjects [ind].名称print(正在删除ind \(ind)，键:\(name)")self.someData.buttonObjects.remove(at:ind)}} 

解决方案

您可能会遇到此问题，因为顶部按钮的覆盖层与 NavigationView 标题栏重叠，这会阻止按钮的输入./p>

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

  NavigationView {VStack {...}.background(颜色.红色)} 

解决方案之一是通过删除以下行来将垃圾图像移到按钮中央附近:

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

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

  NavigationView {VStack {垫片().frame(高度:10)VStack {...}} 

您还可以通过 .padding 获得相同的结果:

  Button(操作:{}){...}.buttonStyle(...).覆盖(...).padding(.top，20) 

This post is related to this. After making rows on 3-column-buttons, when 'Delete Button' is hit, the first 3 buttons are not deletable when the 'trash' image is hit. However, the second row buttons( i.e. tag4) can be deleted. Any idea what went wrong here? All buttons should be deletable.

Here's the code

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


}

解决方案

The problem you have may occur because your top button's overlay overlaps with the NavigationView title bar which will block input for the button.

If you add some background colour to your VStack you'll see your top buttons' trash buttons are actually outside the VStack:

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

One of the solutions is to move the trash image closer to the middle of the button by removing this line:

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

Alternatively you can make sure your trash buttons will not overlap with the NavigationView title bar. As an example you can add a small space above your VStack to make your trash buttons fit inside:

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

You can also get the same result with .padding:

Button(action: { }) {
    ...
}
.buttonStyle(...)
.overlay(...)
.padding(.top, 20)

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