如何在 swiftui 中将图像对齐到按钮顶部？

Question

我希望在按下“删除按钮”时在每个按钮的右上角添加一个“垃圾”图像，这样当用户点击垃圾图像时，该按钮将从 vstack 中删除。我想我应该使用 zstack 来定位垃圾图像，但我现在不知道如何。下面显示了垃圾图像应位于每个按钮中的位置。

另外，当我按下“删除按钮”时，似乎每个按钮的文本大小和与另一个按钮的间距略有变化。我该如何克服这个问题？当点击“删除按钮”时，按钮位置、间距、文本大小应保持不变。

struct someButton: 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{
                        ForEach(Array(someData.buttonTitles.keys.enumerated()), id: \.element){ ind, buttonKeyName in
//

                               Button(action: {
                                self.someData.buttonTitles[buttonKeyName] = !self.someData.buttonTitles[buttonKeyName]!
                                print("Button pressed! buttonKeyName is: \(buttonKeyName) Index is \(ind)")
                                print("bool is \(self.someData.buttonTitles[buttonKeyName]!)")



                               }) {
                                   HStack{ //HStack, ZStack
                                    if self.isEdit{
                                           Image(systemName: "trash")
                                            .foregroundColor(.red)
                                            .onTapGesture{
                                                print("buttonkey \(buttonKeyName) will be deleted")
                                                self.deleteItem(ind: ind)
                                            }
                                    }


                                    Text(buttonKeyName)
//                                           .fontWeight(.semibold)
//                                           .font(.title)
                                   }



                               }
                               .buttonStyle(GradientBackgroundStyle(isTapped: self.someData.buttonTitles[buttonKeyName]!))
                               .padding(.bottom, 20)



                        }
                    }


                    HStack{
                        TextField("Enter new button name", text: $newButtonTitle){
                            self.someData.buttonTitles[self.newButtonTitle] = false
                            self.newButtonTitle = ""
                        }
                    }


                }
                .navigationBarItems(leading: Button(action: {self.isEdit.toggle()}){Text("Delete Button")},
                                    trailing: EditButton())

//                .navigationBarItems(leading: Button(action: {}){Text("ergheh")})
//            }

        }

    }


    func deleteItem(ind: Int) {
        let key = Array(someData.buttonTitles.keys)[ind]
        print(" deleting ind \(ind), key: \(key)")
       self.someData.buttonTitles.removeValue(forKey: key)
       }


}




struct GradientBackgroundStyle: ButtonStyle {
    var isTapped: Bool

    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .frame(maxWidth: .infinity, maxHeight: 50)
            .padding()
            .foregroundColor(isTapped ? Color.blue : Color.black)
            .background(LinearGradient(gradient: Gradient(colors: [Color("DarkGreen"), Color("LightGreen")]), startPoint: .leading, endPoint: .trailing))

            .cornerRadius(40)
            .overlay(RoundedRectangle(cornerRadius: 40)
                .stroke(isTapped ? Color.blue : Color.black, lineWidth: 4))
            .shadow(radius: 40)
            .padding(.horizontal, 20)
            .scaleEffect(configuration.isPressed ? 0.9 : 1.0)
//


    }
}



class SomeData: ObservableObject{
    @Published var buttonTitles: [String: Bool] = ["tag1": false, "tag2": false]
}

Answer 1

这是可能方法的演示。使用 Xcode 11.4 / iOS 13.4 进行测试（使用一些复制代码）

var body: some View {
       Button(action: { }) {
        Text("Name")
       }
       .buttonStyle(GradientBackgroundStyle(isTapped: tapped))
       .overlay(Group {
            if self.isEdit {
                ZStack {
                    Button(action: {print(">> Trash Tapped")}) {
                       Image(systemName: "trash")
                            .foregroundColor(.red).font(.title)
                    }.padding(.trailing, 40)
                    .alignmentGuide(.top) { $0[.bottom] }
                }.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing)

            }
       })
       .padding(.bottom, 20)
}