尝试制作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屋!