Programmiererforum

Posted: **11 Jan 2025, 11:36**

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!

Programmiererforum

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

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