1

我在聊天应用程序中有一个倒排列表。添加新行时,默认动画几乎就像拉开窗帘以显示新行一样。新行似乎从下到上出现。我想要的是相反的。我希望它看起来新行从屏幕下方向上滑动,以便新行的顶部在动画到位时首先变得可见。

为了动态内容滚动性能,我需要保持列表倒置。

目前我正在使用以下结构:

class Model: ObservableObject {
    @Published var numberArray = [19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
}

struct ContentView: View {
    @StateObject var model = Model()
    var body: some View {
        Button(action: {
            model.numberArray.insert(model.numberArray.count + 1, at: 0)
        }, label: {
            Text("Append Number")
        })
        List {
            ForEach(model.numberArray, id: \.self) { number in
                    Text("The number is: \(number)")
                        .scaleEffect(x: 1, y: -1, anchor: .center)
                        .padding(.horizontal, 30)
                        .padding(.vertical, 8)
                        .background(Color.blue)
                        .foregroundColor(.white)
                        .font(.title)
                }
        }
        .scaleEffect(x: 1, y: -1, anchor: .center)
        .animation(.default)
    }
}

在此处输入图像描述

有没有办法将此默认动画更改为从上到下而不是自下而上显示新行的动画?

4

0 回答 0