Добавление пузырька реакции в стиле iMessage при использовании contextMenu в SwiftUI ⇐ IOS

[Anonymous]

Я пытаюсь имитировать взаимодействие с сообщением чата, как это видно в iMessage, Instagram и WhatsApp.
[img]https://i.sstatic. net/xFi63.jpg[/img]

Я могу создать представления и контекстное меню, но не могу заставить их эффективно работать вместе.
В этом блоке кода я использую предварительный просмотр contextMenu. установить пузырь реакции поверх сообщения, но пузырь сообщения дергается, и позади всего изображения появляется нежелательный белый фон.

Код: Выделить всё

  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)
}
}
}

Если я изменю блок предварительного просмотра на использование наложения, изображение будет таким же рывком, но затем наложение исчезнет.

Код: Выделить всё

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

Я попробовал несколько других вариантов с аналогичными результатами. Как мне сделать так, чтобы это приложение выглядело хорошо и было похоже на другие приложения?
Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/770 ... in-swiftui