I am unable to eliminate an animation glitch. Right here is my code:
// Bubble.swift
import SwiftUI
struct Bubble: Identifiable {
var id = UUID()
var sender: Sender
var textual content: String
var worth: String?
var inputType: String?
}
enum Sender {
case consumer
case bot
case system
}
struct BubbleView: View {
@State var bubble: Bubble
@State var showBubble = false
var physique: some View {
Part {
if self.showBubble {
swap bubble.sender {
case .consumer, .bot:
Textual content(bubble.textual content)
.padding(10)
.foregroundColor(bubble.sender == Sender.consumer ? .white : .black)
.background(bubble.sender == Sender.consumer ? .accentColor : Coloration(UIColor.systemGray5))
.clipShape(RoundedRectangle(cornerRadius: 20))
.body(maxWidth: .infinity, alignment: bubble.sender == Sender.consumer ? .trailing : .main)
.padding(.vertical, bubble.sender == Sender.consumer ? 10 : 0)
.transition(.transfer(edge: .backside))
case .system:
Textual content(bubble.textual content.uppercased())
.padding(10)
.foregroundColor(.secondary)
.font(.caption)
.fontWeight(.semibold)
.body(maxWidth: .infinity)
.transition(.transfer(edge: .backside))
}
} else {
Textual content("")
}
}.onAppear {
withAnimation {
self.showBubble.toggle()
}
}
}
}
#Preview {
VStack(alignment: .main) {
BubbleView(bubble: Bubble(sender: .bot, textual content: "It is-a me, Mario!"))
BubbleView(bubble: Bubble(sender: .consumer, textual content: "And it's-a me, Luigi!"))
BubbleView(bubble: Bubble(sender: .system, textual content: "10:30"))
}
}
// Dialog.swift
import SwiftUI
struct DialogView: View {
@Binding var dialog: [Bubble]
func scrollDown(proxy: ScrollViewProxy) {
if let lastID = dialog.final?.id {
withAnimation {
proxy.scrollTo(lastID)
}
}
}
var physique: some View {
ScrollViewReader { proxy in
ScrollView {
VStack(alignment: .main) {
ForEach(dialog) { bubble in
BubbleView(bubble: bubble)
}
.onChange(of: dialog.rely, preliminary: false) { _,_ in
scrollDown(proxy: proxy)
}
}
.body(maxHeight: .infinity)
.padding()
Spacer()
}
}
}
}
#Preview("Dialog view") {
DialogView(dialog: .fixed([
Bubble(sender: .bot, text: "Bubble 1"),
Bubble(sender: .bot, text: "Bubble 2"),
Bubble(sender: .bot, text: "Bubble 3")
]))
}
It is part of a bigger challenge, however the DialogView animation is buggy: on its first look, one thing unusual occurs. To have the ability to see it, you’ll be able to simply create a brand new SwiftUI iOS challenge, and paste my code into two new information. Then, go to the Dialog.swift
file and see the preview. Nothing stranges occurs on the primary time however for those who edit the DialogView
physique (as an illustration commenting) you will notice the unusual animation.
It occurs continuously on my larger challenge, and I do not know learn how to take away it. It’s doable to check it on the simulator changing the ContentView.swift
content material by the next:
// ContentView.swift
import SwiftUI
struct ContentView: View {
@State var bubbles: [Bubble] = []
var physique: some View {
DialogView(dialog: $bubbles)
Button {
if self.bubbles.rely == 0 {
self.bubbles = [
Bubble(sender: .bot, text: "Bubble 1"),
Bubble(sender: .bot, text: "Bubble 2"),
Bubble(sender: .bot, text: "Bubble 3")
]
} else {
self.bubbles = []
}
} label: {
Textual content("Check")
}
}
}
#Preview {
ContentView()
}
Can somebody assist me? Thanks!