本帖与 这个. 在3列按钮上制作行后,当点击 "删除按钮 "时,当点击 "垃圾 "图像时,前3个按钮是不能删除的,但第二行按钮(即标签4)可以删除。但是,第二行按钮(即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)
}
}
你所遇到的问题可能是由于你的顶部按钮的叠加与顶部按钮的叠加重叠。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)