SwiftUI(测试版6)-对视图进行动画重排序

时间:2019-08-21 22:46:57

标签: ios swift swiftui

我正在寻找一种使视图重新排序动画化的方法。最初,我像这样在VStack中实现视图:

@State var someState: State

var body: some View {
    VStack {
        createView(forType: someState.orderedTypes[0])
        createView(forType: someState.orderedTypes[1])
        createView(forType: someState.orderedTypes[2])
    }
}

func createView(forType type: SomeExampleType) -> some View {
    return ...
}

随着@State变量的更改,创建视图的顺序也可能更改。我最初尝试解决

.animate(.easeOut)

在VStack的末尾,但它仅对子视图中的某些更改进行动画处理,而不对它们的顺序进行动画处理。我也尝试过使用List而不是VStack,但是那里也没有运气。有人对我如何实现这一目标有任何提示,而不必求助于笨拙的ZStack / padding废话吗?

1 个答案:

答案 0 :(得分:2)

只要您将其放在ForEach中,并使视图取决于您的状态,这对我来说基本上是有效的。

@State var items: [Int] = [1, 2, 3, 4, 5]

var body: some View {
    VStack {
        ForEach(items, id: \.self) {
            self.view(with: $0 % 2 == 0 ? .text : .image)
        }
        .animation(.default)

        Button("Randomize") {
            self.items.shuffle()
        }
    }
}

private func view(with type: ViewType) -> some View {
    switch type {
    case .text:
        return AnyView(Text("text"))
    case .image:
        return AnyView(Image(systemName: "house"))
    }
}

enter image description here