Добавление реакционного пузыря в стиле imessage при использовании контекста в Swiftui ⇐ IOS

[Anonymous]

Я пытаюсь имитировать взаимодействия с сообщением чата, как видно в Imessage, Instagram и WhatsApp. /> В этом кодовом блоке я использую предварительный просмотр контекста, чтобы укрепить реакционный пузырь поверх сообщения, но за весь представление придумывается пузырьковое сообщение, и за всем представлением есть нежелательный белый фон. < /p>

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

  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