如何将图像添加到`confirmationDialog`中的按钮

Question

我正在构建我的第一个 SwiftUI 应用程序，但遇到了一个阻止程序。当用户长按我的一个单元格时，我想显示带有自定义按钮的confirmationdialog。

代码如下：

.confirmationDialog("", isPresented: $showLongPressMenu) {
    Button {
        //
    } label: {
        HStack {
            Image(systemName: "checkmark.circle")
            Text("Add completion")
        }
    }
    Button {
        //
    } label: {
        HStack {
            Image(systemName: "note.text.badge.plus")
            Text("Add Note")
        }
    }
    Button("Cancel", role: .cancel) {}
}

这是一种工作，结果如下：

但我想要实现的是这样的：

任何指针都会很棒，谢谢。

Answer 1

这是一个快速纯SwiftUI自定义Dialog我写的：

内容视图：

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct ContentView: View {
    @State var present = true
    var body: some View {
        Text("This is a Test")
            .customDialog(isPresented: $present, bodyContent: {
                VStack {
                    Button(action: {
                        
                    }) {
                        HStack {
                            Image(systemName: "checkmark.circle")
                            Text("Add completion")
                            Spacer()
                        }
                    }.buttonStyle(.dialog)
                    Button(action: {
                        
                    }) {
                        HStack {
                            Image(systemName: "note.text.badge.plus")
                            Text("Add Note")
                            Spacer()
                        }
                    }.buttonStyle(.dialog(isLast: true))
                }
            }, cancelContent: {
                HStack {
                    Spacer()
                    Text("Cancel")
                        .font(.title3)
                        .fontWeight(.semibold)
                    Spacer()
                }
            })
    }
}

自定义对话框：

struct CustomDialog<Content: View>: View {
    @Binding var isPresented: Bool
    let bodyContent: Content
    let cancelContent: Content
    init(isPresented: Binding<Bool>, @ViewBuilder bodyContent: @escaping () -> Content, @ViewBuilder cancelContent: @escaping () -> Content) {
        self._isPresented = isPresented
        self.bodyContent = bodyContent()
        self.cancelContent = cancelContent()
    }
    var body: some View {
        VStack(spacing: 10) {
            Spacer()
            VStack {
                bodyContent
            }.background(Color.white)
            .clipShape(RoundedRectangle(cornerRadius: 12, style: .continuous))
            .shadow(color: .black.opacity(0.1), radius: 5, x: 0, y: 0)
            Button(action: {
                isPresented = false
            }) {
                cancelContent
                    .padding(17)
                    .background(Color.white)
                    .clipShape(RoundedRectangle(cornerRadius: 12, style: .continuous))
                    .shadow(color: .black.opacity(0.1), radius: 5, x: 0, y: 0)
            }
        }.padding(8)
        .padding(.bottom, -5)
        .transition(.move(edge: .bottom))
        .animation(Animation.easeInOut(duration: 0.5), value: isPresented)
    }
}

extension View {
    @ViewBuilder func customDialog<Contenty: View>(isPresented: Binding<Bool>, @ViewBuilder bodyContent: @escaping () -> Contenty, @ViewBuilder cancelContent: @escaping () -> Contenty) -> some View {
        ZStack {
            self
            if isPresented.wrappedValue {
                Color.black
                    .opacity(0.25)
                    .edgesIgnoringSafeArea(.all)
                CustomDialog(isPresented: isPresented, bodyContent: bodyContent, cancelContent: cancelContent)
            }
        }
    }
}

对话框按钮样式：

struct DialogButtonStyle: ButtonStyle {
    let isLast: Bool
    func makeBody(configuration: Self.Configuration) -> some View {
        VStack {
            configuration
                .label
                .opacity(configuration.isPressed ? 0.5: 1)
                .padding(17)
                .padding(.bottom, isLast ? 0: -6)
                .padding(.top, isLast ? -6: 0)
            if !isLast {
                Divider()
            }
        }
    }
}


extension ButtonStyle where Self == DialogButtonStyle {
    static func dialog(isLast: Bool) -> DialogButtonStyle {
        return DialogButtonStyle(isLast: isLast)
    }
    static var dialog: DialogButtonStyle {
        get {
            return DialogButtonStyle(isLast: false)
        }
    }
}