Programmiererforum

struct ContentView: View {
@State private var text = ""
@Namespace var ns
@FocusState private var isFocused: Bool

var body: some View {
ZStack {
Color.clear
.contentShape(Rectangle())
.onTapGesture {
isFocused = false
}
VStack {
HStack {
TextField("placeholder", text: $text, axis: .vertical)
.focused($isFocused)
.frame(minHeight: 28)
.background(Color.red)
if !isFocused {
Text("xxxxxx") // position1
.background(Color.blue)
.matchedGeometryEffect(id: "xxxxxx", in: ns)
}
}
if isFocused {
HStack {
Spacer()
Text("xxxxxx") // position2
.background(Color.blue)
.matchedGeometryEffect(id: "xxxxxx", in: ns)
}
}
}
.background(Color.yellow)
.animation(.easeInOut(duration: 1), value: isFocused)
}
.padding()
}
}

Ich habe matchedGeometryEffect verwendet, um die Größe und Position der beiden Ansichten miteinander zu „verknüpfen“.
Aber ich habe versucht, Textfield zu verwenden und den Zeitpunkt des Auslösens der Animation zum Fokussieren geändert. Wenn die Tastatur eingeblendet wird, wird die Animation nicht reibungslos ausgeführt.
Wie sorgt man dafür, dass die Elemente in der Ansicht reibungslos gleiten? (Position1 bewegt sich sanft zu Position2)
[code]struct ContentView: View {
@State private var text = ""
@Namespace var ns
@FocusState private var isFocused: Bool

var body: some View {
ZStack {
Color.clear
.contentShape(Rectangle())
.onTapGesture {
isFocused = false
}
VStack {
HStack {
TextField("placeholder", text: $text, axis: .vertical)
.focused($isFocused)
.frame(minHeight: 28)
.background(Color.red)
if !isFocused {
Text("xxxxxx") // position1
.background(Color.blue)
.matchedGeometryEffect(id: "xxxxxx", in: ns)
}
}
if isFocused {
HStack {
Spacer()
Text("xxxxxx") // position2
.background(Color.blue)
.matchedGeometryEffect(id: "xxxxxx", in: ns)
}
}
}
.background(Color.yellow)
.animation(.easeInOut(duration: 1), value: isFocused)
}
.padding()
}
}
[/code]
[img]https://i.sstatic.net/82rWP8JT.gif[/img]