Wie kann ich eine Scrollview so rendern, dass die Bildlaufposition während des Layouts bei der richtigen ID steht? ⇐ IOS

[Anonymous]

unten finden Sie eine Beispielansicht meines Problems. Es gibt eine Taste, die beim Drücken zwischen zwei Scroll -Ansichten mithilfe von Withanimation umschalten und die Bildlaufposition auf die zweiten und dritten Elemente für eine der beiden Scroll -Ansichten in OnAppear . Dies scheint jedoch nicht möglich zu sein, wenn die Listenposition mithilfe einer ID /ScrollPosition festgelegt wird: < /p>

Initialisierung einer ScrollPosition mit der richtigen ID und das Rendern der Scrollview mit der Schriftrolle. Scrollen Sie zu dieser Position in onAppear . Es scheint jedoch, dass der MatchEdgeMetryEffect die Position der Elemente so interpoliert, so wie der ContentOffset.y der ScrollView kurz ist, was zu einem seltsamen Effekt führt, was zu einem seltsamen Effekt führt. Interpolieren Sie zwischen den richtigen Positionen < /li>
< /ul>
Video < /p>
Es scheint, dass ich entweder < /p>
a) sicherstellen muss, dass die Liste vorhanden (sehr schwierig mit dynamischen Listenelementen, die dieses Problem löst, wenn das Problem der richtigen Position ausgesetzt ist). Wenn Sie das Problem ausdrücken, ist das Problem zu löschen, wenn die y -Position explizit festgelegt ist). Bei der richtigen ID zuvor konnte (nicht in der Lage waren, herauszufinden, wie)
c) sicherstellen, dass die übereinstimmende Geometrie -Effekt die kurze "0" -Bease der Scrollview ignoriert, bevor die ID -Position in onAppear festgelegt wird. /> Irgendwelche Ideen zur Lösung dieses?

Code: Select all

import SwiftUI

struct Item: Identifiable {
let id = UUID().uuidString
var height: CGFloat
var label: String
}

enum TestScrollListStyle {
case primary
case alternate
}

struct TestScrollList: View {
let items: [Item]
let style: TestScrollListStyle
let namespace: Namespace.ID
@Binding var scrollPosition: ScrollPosition
var initialIndex: Int = 2

var body: some View {
ScrollView {
VStack(spacing: style == .primary ? 8 : 16) {
ForEach(items, id: \.id) { item in
switch style {
case .primary:
Text(item.label)
.frame(maxWidth: .infinity)
.frame(height: item.height)
.padding(.horizontal)
.background(
Rectangle()
.fill(.blue.opacity(0.15))
.matchedGeometryEffect(id: item.id, in: namespace)
)
case .alternate:
HStack {
Circle()
.fill(.green.opacity(0.25))
.frame(width: 24, height: 24)
Text(item.label)
.frame(maxWidth: .infinity, alignment: .leading)
}
.frame(height: item.height)
.padding(.horizontal)
.background(
Rectangle()
.fill(.green.opacity(0.08))
.matchedGeometryEffect(id: item.id, in: namespace)
)
}
}
}
.scrollTargetLayout()
.padding(.vertical)
}
.scrollPosition($scrollPosition, anchor: .top)
.onAppear {
var tx = Transaction()
tx.disablesAnimations = true
withTransaction(tx) {
if items.indices.contains(initialIndex) {
scrollPosition.scrollTo(id: items[initialIndex].id)
}
}
}
}
}

struct ContentView: View {
@Namespace private var matchedNamespace

@State private var items: [Item] =
(0..