问题描述
此帖子与.在3列按钮上排成一行后，当点击删除按钮"时，当点击垃圾箱"图像时，前3个按钮不可删除.但是，可以删除第二行按钮(即tag4).知道这里出了什么问题吗?所有按钮都应该是可删除的.
这是代码
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列可删除按钮成行，但第一行按钮不可删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！