【问题标题】:How can I create multiple transitions in a ZStack?如何在 ZStack 中创建多个转换?
【发布时间】:2019-11-11 07:54:46
【问题描述】:

我正在尝试在 ZStack 中创建多个转换。

这是一个测试视图,其中包含一些文本和一个圆圈,它们都有自己的过渡。

struct Test: View {
    @Binding var isPresented: Bool
    @State private var showCircle: Bool = false
    @State private var showRect: Bool = false

    var body: some View {
        ZStack {
             if showRect {
                 VStack {
                     Text("Hello World")
                         .foregroundColor(.white)
                         .padding()
                 }
                 .background(Color.green)
                 .transition(.move(edge: .bottom))
            }

            if showCircle {
                Circle()
                    .fill(Color.purple)
                    .transition(.slide)
            }
        }
        .onAppear() {
            withAnimation {
                self.showRect.toggle()
                self.showCircle.toggle()
            }
        }
        .onDisappear() {
            withAnimation {
                self.showCircle.toggle()
                self.showRect.toggle()
            }
        }
    }
}

我这样添加这个视图:

struct ContentView: View {
    @State private var toggler: Bool = false

    var body: some View {
        ZStack {

            if toggler {
                Test(isPresented: $toggler)
            }

            Button("Show/Hide") {
                withAnimation {
                    self.toggler.toggle()
                }
            }
        }
    }
}

过渡在出现时起作用。
但是 onDisappear 似乎在删除期间而不是之前被调用。

如何重置状态变量以触发移除时的转换或我应该使用什么其他方法?

其他尝试:
我还尝试创建自定义修饰符以将它们与 Anytransition.modifier 一起使用 - 但失败了,因为我无法进行类型转换以访问状态变量,并且 Anytransition.modifier 要求修饰符符合 ViewModifier。

TestView 中的解除函数,如果我想从自身解除视图,但当它被其父项解除时显然不起作用。

【问题讨论】:

    标签: swift swiftui


    【解决方案1】:

    这样做,而不是 onAppear/disappear

    struct ContentView : View {
        @State private var isButtonVisible = true
    
        var body: some View {
            VStack {
                Toggle(isOn: $isButtonVisible.animation()) {
                    Text("Show/Hide button")
                }
    
                if isButtonVisible {
                    Button(action: {}) {
                        Text("Hidden Button")
                    }.transition(.move(edge: .trailing))
                }
            }
        }
    }
    

    或带按钮

    struct ContentView : View {
        @State private var isButtonVisible = true
    
        var body: some View {
            VStack {
                Button(action: {
                    withAnimation {
                        self.isButtonVisible.toggle()
                    }
                }) {
                    Text("Press me")
                }
    
                if isButtonVisible {
                    Button(action: {}) {
                        Text("Hidden Button")
                    }.transition(.move(edge: .trailing))
                }
            }
        }
    }
    

    你也可以组合转换:看看这个:https://swiftwithmajid.com/2019/06/26/animations-in-swiftui/

    【讨论】:

    • 感谢您的回答!据我了解,这段代码以这种方式动画只是因为 SwiftUI 容纳了新出现的 Button。我正在尝试做一些不同的事情。我想在两个嵌套视图上有两个不同的转换。我该怎么做?
    猜你喜欢
    • 2021-03-04
    • 2021-11-18
    • 2020-11-09
    • 2022-11-28
    • 2020-08-10
    • 2015-09-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多