当View呈现SwiftUI iOS 17.4时如何从底部移动ZStack？

Question

当视图显示在屏幕上时，我尝试从底部显示 ZStack 动画。 下面的代码不起作用。 我是新人，不知道这有什么问题？ withAnimation 应该在哪里，过渡在哪里？

代码如下所示：

                ZStack {
                    RoundedRectangle(cornerRadius: 15, style: .continuous)
                        .fill(.white)
                        .frame(width:UIScreen.main.bounds.width - 32, height: 250)
                        .background(.ultraThinMaterial,
                                    in: RoundedRectangle(cornerRadius: 15, style: .circular))
                        .opacity(0.4)
                        .shadow(radius: 5, x:0, y: 3)
                    
                    VStack(alignment: .leading, spacing: 10) {
                        Text("Login")
                            .font(.title3)
                            .foregroundColor(Color(.systemGray))
                        
                        TextField("Enter login", text: $login)
                            .textFieldStyle(.roundedBorder)
                            .submitLabel(.continue)
                        
                        Text("Password")
                            .font(.title3)
                            .foregroundColor(Color(.systemGray))
                        
                        SecureField("Enter password", text: $password)
                            .textFieldStyle(.roundedBorder)
                            .submitLabel(.done)
                        Spacer()
                        
                        Button(action: {
                            
                        }, label: {
                            Text("Enter")
                                .frame(maxWidth: .infinity, maxHeight: 40)
                                .background(Color(.systemYellow))
                                .clipShape(.buttonBorder)
                                .foregroundStyle(Color(.black))
                                .opacity(0.6)
                        })
                    }
                    .padding()
                    .frame(width:UIScreen.main.bounds.width - 32, height: 250)
                }
                .padding()
                .onAppear {
                    withAnimation(.easeInOut(duration: 5)) {
                        isPresented.toggle()
                    }
                }
                .transition(AnyTransition.move(edge: .bottom))
                .zIndex(0)
            }

Answer 1

没有发生任何转换，因为内容第一次出现时就已经可见。

修复：

• 尝试将

  ZStack

  嵌套在其他容器中（

  Group

  即可）。
• 将

  onAppear

  回调移至容器。
• 使

  ZStack

  的可见性以状态变量

  isPresented

  为条件。

var body: some View {
    Group {
        if isPresented {
            ZStack {
                // ...
            }
            .padding()
            .transition(AnyTransition.move(edge: .bottom))
        }
    }
    .onAppear {
        withAnimation(.easeInOut(duration: 5)) {
            isPresented.toggle()
        }
    }
}