swift - 试图制作成排的 3 列可删除按钮,但有些东西在这里不起作用
问题描述
我试图在 VStack 中制作多行 3 列按钮。它在这篇文章中起作用,在我重写了使按钮出现在一行 3 列中的解决方案后,它不再起作用 - 当我单击“删除按钮”时,每个按钮上都不会出现额外的垃圾图像。这里有什么问题吗?
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)
}
}
解决方案
.id
您可以在末尾添加显式ForEach
- 因为您使用的是静态ForEach
,您可能需要强制刷新它。
在您之前的帖子中,您使用了动态ForEach
(带id
参数)。这就是它起作用的原因。
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
推荐阅读
- node.js - Apm-server 事务未记录在节点 js 代理中(快递)
- perl - 在循环中用两个变量填充多维数组
- php - 输入按钮在 Wordpress 中不起作用(引导程序)
- reactjs - React Developer Tool 错误检查最新版本
- php - Wordpress get_the_excerpt() 正在返回一个字符串“摘要”
- javascript - 完整的日历显示开始日期和结束日期但结束日期错误显示
- python - PyCharm 无法安装 ITK 包。CMake 给出一个错误
- javascript - 多个 tr 元素的选择器
- android-management-api - 当设备始终不在线时,自助服务终端应用程序更新
- php - 我对如何从另一个表中获取列有疑问