animation - 在 ScrollView 中使用matchedGeometryEffect 动画的问题

问题描述

在 a和 an之间使用另一个视图（在本例中为 a ）View为 s 设置动画效果很好：LazyVGridHStackButtonmatchedGeometryEffect

注意动画视图是如何在完成按钮上方移动的。

但是，当视图包含在 aScrollView中时，动画视图现在移动到中间视图后面：

我尝试将 s 设置zIndex为ScrollView> 0（或更多），但这似乎并没有改变任何东西。

关于如何解决这个问题的任何想法？

人

struct Person: Identifiable, Equatable {
    var id: String { name }
    let name: String
    var image: Image { Image(name) }
    
    static var all: [Person] {
        ["Joe", "Kamala", "Donald", "Mike"].map(Person.init)
    }
}

内容视图

struct ContentView: View {

    @State var people: [Person]
    @State private var selectedPeople: [Person] = []
    @Namespace var namespace

    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            ScrollView(.horizontal) {
                SelectedPeopleView(people: $selectedPeople, namespace: namespace) { person in
                    withAnimation(.easeOut(duration: 1)) {
                        selectPerson(person)
                    }
                }
                .background(Color.orange)
            }
            doneButton()
            ScrollView(.vertical) {
                PeopleView(people: people, namespace: namespace) { person in
                    withAnimation(.easeOut(duration: 1)) {
                        deselectPerson(person)
                    }
                }                
            }
            Spacer()
        }
        .padding()
    }

    func selectPerson(_ person: Person) {
        _ = selectedPeople.firstIndex(of: person).map { selectedPeople.remove(at: $0)}
        people.append(person)
    }

    func deselectPerson(_ person: Person) {
        _ = people.firstIndex(of: person).map { people.remove(at: $0)}
        selectedPeople.append(person)
    }

    func doneButton() -> some View {
        Button("Done") {
        }
        .font(.title2)
        .accentColor(.white)
        .frame(maxWidth: .infinity)
        .padding()
        .background(Color.gray)
    }
}

选定人员视图

struct SelectedPeopleView: View {

    @Binding var people: [Person]
    let namespace: Namespace.ID
    let didSelect: (Person) -> Void

    var body: some View {
        HStack {
            ForEach(people) { person in
                Button(action: { didSelect(person) } ) {
                    Text(person.name)
                        .padding(10)
                        .background(Color.yellow.cornerRadius(6))
                        .foregroundColor(.black)
                        .matchedGeometryEffect(id: person.id, in: namespace)
                }
            }
        }
        .frame(height: 80)
    }
}

人物视图

struct PeopleView: View {

    let people: [Person]
    let namespace: Namespace.ID
    let didSelect: (Person) -> Void

    let columns: [GridItem] = Array(repeating: .init(.flexible(minimum: .leastNormalMagnitude, maximum: .greatestFiniteMagnitude)), count: 2)

    var body: some View {
        LazyVGrid(columns: columns) {
            ForEach(people) { person in
                Button(action: { didSelect(person) }) {
                    person.image
                        .resizable()
                        .scaledToFill()
                        .layoutPriority(-1)
                        .clipped()
                        .aspectRatio(1, contentMode: .fit)
                        .cornerRadius(6)
                }
                .zIndex(zIndex(for: person))
                .matchedGeometryEffect(id: person.id, in: namespace)
            }
        }
    }

    func zIndex(for person: Person) -> Double {
        Double(people.firstIndex(of: person)!)
    }
}

标签： animationswiftuiswiftui-scrollview

这看起来像 SwiftUI 中的一个错误，因为即使你Color.clear用任何高度代替你的doneButton（或者甚至.padding是底部的某个高度ScrollView），效果也是一样的。

从视图层次结构中可以看出，两者之间没有任何内容，ScrollView并且图像的渲染是在一个背景视图中执行的

animation - 在 ScrollView 中使用matchedGeometryEffect 动画的问题

问题描述

解决方案

推荐阅读