SwiftUI iOS17.4：视图呈现时如何从底部移入ZStack？

你的代码不生效的核心原因是：SwiftUI的transition动画需要视图被条件性地添加到/移除出视图树，你没有用if这类条件判断来控制ZStack的显示，所以transition不会触发。另外你在ZStack的onAppear里切换isPresented的逻辑也有问题——如果初始isPresented是false，这个ZStack根本不会渲染，onAppear自然不会执行。

下面是修正后的完整代码，关键改动标了注释：

// 确保isPresented是@State变量，初始值设为false
@State private var isPresented = false
@State private var login = ""
@State private var password = ""

var body: some View {
    // 父容器（可替换为你的实际父视图）
    Color.clear
        .ignoresSafeArea()
        .onAppear {
            // 在父视图的onAppear里触发动画，切换isPresented
            withAnimation(.easeInOut(duration: 1)) { // 时长设为1更合理，5秒过长
                isPresented = true
            }
        }
        .overlay(
            // 用if isPresented控制ZStack的显示，这是transition生效的关键
            if isPresented {
                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: {
                            // 可在此添加登录逻辑，或关闭视图的动画
                            withAnimation(.easeInOut) {
                                isPresented = false
                            }
                        }, 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()
                .transition(AnyTransition.move(edge: .bottom)) // 将transition加在条件控制的视图上
                .zIndex(0)
            }
        )
}

关键要点说明： #

• 条件控制视图显示：必须用if isPresented包裹ZStack，当isPresented从false变为true时，ZStack才会被添加到视图树，transition动画才会触发。
• 动画触发时机：把withAnimation放在父视图的onAppear里，父视图初始就会渲染，onAppear会执行，从而触发ZStack的显示动画。
• transition的位置：transition要加在被条件控制的视图（即ZStack）上，确保动画作用于它的添加/移除过程。

内容的提问来源于stack exchange，提问作者Michał Roguski