Всплывающее окно Swift ui macOS на кнопке или на изображении

#swift #image #swiftui #tooltip #popover

#swift #изображение #swiftui #всплывающая подсказка #всплывающее окно

Вопрос:

введите описание изображения здесь

Хотел бы я сделать такую вещь, как показано на изображении.

Я пытаюсь использовать этот фрагмент кода, но я не совсем понимаю, как это исправить.

Я хотел бы использовать его на Button или на ImageMac , который должен быть изображением.

Кто-нибудь может мне помочь?

Код:

 func showLittlePopoverWithMessage(sender: NSView, message: String) {
        let controller = NSViewController()
        controller.view = NSView(frame: CGRect(x: CGFloat(100), y: CGFloat(50), width: CGFloat(100), height: CGFloat(50)))

        let popover = NSPopover()
        popover.contentViewController = controller
        popover.contentSize = controller.view.frame.size

        popover.behavior = .transient
        popover.animates = true

        let invisibleWindow = NSWindow(contentRect: NSMakeRect(0, 0, 20, 5), styleMask: .borderless, backing: .buffered, defer: false)
        invisibleWindow.backgroundColor = .red
        invisibleWindow.alphaValue = 0

        //controller.view.addSubview(sender)
        popover.show(relativeTo: sender.bounds, of: sender as! NSView, preferredEdge: .maxY)
    }
  
 #if os(macOS)
struct ImageMac: View {
    let symbol: String
    init(systemName: String) {
        self.symbol = [
            "star":         "☆",
            "star.fill":    "★",
            "heart":        "􀊴",
            "heart.fill":   "􀊵",
            "video":        "􀍉",
            "lock.fill":    "􀎡",
            "lock.open.fill":    "􀎥",
            "checkmark.seal.fill": "􀇻"
            ][systemName] ?? "?"
    }
    var body: some View { Text(symbol) }
}
#endif

ImageMac(systemName: "checkmark.seal.fill").foregroundColor(.blue)

Button(action: {}) {
   Text("Button")
}
  

Ответ №1:

Вот демонстрация возможного подхода. Подготовлено и протестировано с Xcode 11.7 / macOS 10.15.6

ДЕМОНСТРАЦИЯ

 struct ContentView: View {
    @State var isPopover = false
    var body: some View {
        VStack {
            Button(action: { self.isPopover.toggle() }) {
                Image(nsImage: NSImage(named: NSImage.infoName) ?? NSImage())
            }.popover(isPresented: self.$isPopover, arrowEdge: .bottom) {
                     PopoverView()
            }.buttonStyle(PlainButtonStyle())
        }.frame(width: 800, height: 600)
    }
}

struct PopoverView: View {
    var body: some View {
        VStack {
            Text("Some text here ").padding()
            Button("Resume") {
            }
        }.padding()
    }
}
  

Комментарии:

1. Хотя в ответе действительно отображается всплывающее окно, кнопка Возобновить не закрывает его. Один из способов решить эту проблему — передать параметр состояния isPopover в качестве @Binding в PopoverView. Там можно переключить isPopover, чтобы закрыть представление.