SwiftUI -如何在iOS 15.0及以上版本中显示自定义横幅通知?

1dkrff03  于 2023-03-16  发布在  Swift
关注(0)|答案(1)|浏览(157)

我使用以下代码创建了一个自定义横幅通知:

struct ContentView: View {
    
    @State private var showAlert = false
    
    var body: some View {
        ZStack {
            if showAlert {
                VStack {
                    NotificationView()
                    Spacer()
                }
                .animation(.easeInOut)
                .transition(.move(edge: .top))
            }
            Button("Show Alert") {
                showAlert.toggle()
            }
        }
    }
}

产出如下:

但是当我在iOS 15. 0及以上版本下运行相同的代码时,我会得到一条警告信息。
“animation”在iOS 15.0中已弃用:请改用with Animation或animation(_:value:)。
为了修正这个问题,我使用了代码.animation(.easeInOut, value: showAlert)而不是.animation(.easeInOut),因为现在需要value参数。添加后,动画停止工作。
后来我发现在“显示警报”按钮中使用**withAnimation {}**代码,如下所示

Button("Show Alert") {
    withAnimation {
        showAlert.toggle()
    }
}

这一改变将使它再次动画化,但它不像以前那样。它将只从“底部到顶部”动画化“NotificationView”。我需要像以前那样从“顶部到底部”和“底部到顶部”动画化它。
如何使用更新的animation(_:value:)代码在iOS 15.0及以上版本中恢复相同的动画?

wn9m85ua

wn9m85ua1#

正如我从您的问题中理解的那样,要从上到下进行动画制作,您需要将ZStack的对齐方式添加到顶部,并将按钮添加到VStack和VStack外部的条件逻辑,因为您可以按照以下代码获得所需的输出:

代码:

import SwiftUI

struct CustomScreen: View {
    
    @State private var showView: Bool = false
    
    var body: some View {
        ZStack(alignment: .top) {
            
            VStack {
                Spacer()
                Button("Show Alert") {
                    withAnimation {
                        showView.toggle()
                    }
                }
                Spacer()
            }
            
            if showView {
                RoundedRectangle(cornerRadius: 15)
                    .fill(Color.blue)
                    .frame(width: UIScreen.main.bounds.width * 0.9, height: UIScreen.main.bounds.height * 0.1)
                    .transition(.asymmetric(insertion: .move(edge: .top), removal: .move(edge: .top))) // you can add this effect also removal: AnyTransition.identity.animation(.easeInOut)
            }
            
            
        }
    }
}

输出:

相关问题