Hinzufügen einer Reaktionsblase im iMessage-Stil bei Verwendung von contextMenu in SwiftUI ⇐ IOS

[Guest]

Ich versuche, die Interaktionen mit einer Chat-Nachricht nachzuahmen, wie sie in iMessage, Instagram und WhatsApp zu sehen sind.
[img]https://i.sstatic. net/xFi63.jpg[/img]

Ich kann die Ansichten und das Kontextmenü erstellen, aber ich kann sie nicht effektiv zusammenarbeiten lassen.
In diesem Codeblock verwende ich die contextMenu-Vorschau zum Stapeln Die Reaktionsblase befindet sich über der Nachricht, aber die Nachrichtenblase ruckelt und hinter der gesamten Ansicht befindet sich ein unerwünschter weißer Hintergrund.

Code: Select all

  var body: some View {
MessageView
.contextMenu {
Button(action: {
// do copy
}) {
Text("Copy Message")
Image(systemName: "doc")
}
} preview: {
VStack {
ReactionsView
MessageView
}
}
}

var MessageView : some View {
ZStack {
RoundedRectangle(cornerRadius: 15)
.frame(width: 150, height: 40)
.foregroundColor(.accentColor)
Text("Hello, World!")
}
}

var ReactionsView : some View {
ZStack {
RoundedRectangle(cornerRadius: 20)
.foregroundColor(Color(.systemGray5))
.frame(width: 200, height: 50)
.clipped()
HStack(spacing: 20) {
Image(systemName: "heart.fill")
.foregroundColor(.red)
Image(systemName: "hands.clap.fill")
.foregroundColor(.green)
Image(systemName: "hand.thumbsup.fill")
.foregroundColor(.blue)
}
}
}

Wenn ich den Vorschaublock so ändere, dass er ein Overlay verwendet, erhalte ich das gleiche Ruckeln der Ansicht, aber das Overlay verschwindet dann.

Code: Select all

    var body: some View {
MessageView
.contextMenu {
Button(action: {
// do copy
}) {
Text("Copy Message")
Image(systemName: "doc")
}
} preview: {
MessageView
.overlay {
ReactionsView
.offset(y: -50)
}
}
}

Ich habe mehrere andere Varianten mit ähnlichen Ergebnissen ausprobiert. Wie kann ich dafür sorgen, dass es gut aussieht und sich wie diese anderen Apps anfühlt?
Vielen Dank!