主页 / coding / 问题 / 78978021
Accepted
esbenr
Asked: 2024-09-12 19:54:08 +0800 CST

在 ScrollView 中对位置变化进行动画处理

  • 772
  • 很抱歉使用了伪代码，但我不允许分享我的代码。

我有一个 ScrollView，其中包含顶部的固定项目和底部的取消固定项目。

 ______________
|    Item 1    |
|    Item 2    |
|    Item 3    |
|--------------|
|    Item 4    |
|    Item 5    |
|    Item 6    |
|    Item 7    |
|    Item 8    |
|______________|

Scroll 视图由两个集合（pinnedItems 和 unpinnedItems）填充，使用 ScrollView 中的两个 ForEach 子句。

var pinnedItems = ["Item 1", "Item 2", "Item 3"]
var unpinnedItems = ["Item 4", "Item 5", "Item 6", "Item 7", "Item 8"]

ScrollView {
    ForEach(pinnedTasks) { task in
        NavigationLink(value: NavigationPath.task(task)) {
            TaskCardView(task: task, onPinning: {
                withAnimation {
                    togglePinnedTask(task: task)
                }
            })
            .padding(.bottom)
        }.buttonStyle(.plain)
    }


    Divider()
        .frame(minHeight: 3)
        .background(.gray)
        .padding(.bottom)


    ForEach(unPinnedTasks) { task in
        NavigationLink(value: NavigationPath.task(task)) {
            TaskCardView(task: task, onPinning: {
                withAnimation {
                    togglePinnedTask(task: task)
                }
            })
            .padding(.bottom)
        }.buttonStyle(.plain)
    }
}

togglePinnedTask() 函数从一个集合中删除任务并将其插入到另一个集合中。

自动动画只会淡出任务卡。我想让它们“飞”到新的位置。这样做的方法是什么？

animation

1 个回答

  1. Best Answer

    您可以使用matchedGeometryEffect。这是一个简单示例：

    struct ContentView: View {
    @State private var pinnedItems = ["Item 1", "Item 2", "Item 3"]
    @State private var unpinnedItems = ["Item 4", "Item 5", "Item 6", "Item 7", "Item 8"]
    @Namespace var ns
    
    var body: some View {
        VStack {
            ScrollView {
                VStack {
                    ForEach(pinnedItems, id: \.self) { item in
                        Text(item)
                            .matchedGeometryEffect(id: item, in: ns)
                    }
                    ForEach(unpinnedItems, id: \.self) { item in
                        Text(item)
                            .matchedGeometryEffect(id: item, in: ns)
                    }
                }
            }

            // as an example to trigger the animation
            Button("Change Pins") {
                withAnimation {
                    pinnedItems.append(unpinnedItems.removeLast())
                }
            }
        }
    }
}

    请注意，在matchedGeometryEffects 和ForEaches 中，我都使用了其item本身作为 id。在您的实际代码中，您的项目可能符合要求Identifiable，因此您应该使用其id属性。

    • 1

相关问题