SwiftUI：显示具有动画延迟的特定视图

我正在尝试实现以下动画：当我点击一个矩形时，该矩形应扩展到全宽，并在角落处使用关闭按钮，在该矩形下方应显示滚动视图。到目前为止，这项工作没有任何问题。现在，我想稍后再显示ScrollView，然后显示展开的矩形。因此，当我点击矩形时：首先，带有关闭按钮的展开矩形应该出现，3秒钟后，滚动视图会出现

struct Playground: View {
    @Namespace var namespace
    @State var show = false
    private let gridItems = [GridItem(.flexible())]
    
    
    var body: some View {
        
        if show {
            VStack{
                ZStack(alignment: Alignment(horizontal: .trailing, vertical: .top)){
                    Rectangle()
                        .matchedGeometryEffect(id: "A", in: namespace, isSource: show)
                        .frame(height: 300)
                        .frame(maxWidth: .infinity)
                    
                    Image(systemName: "xmark")
                        .font(.system(size: 25))
                        .foregroundColor(.white)
                        .background(Color.red)
                        .padding(20)
                        .onTapGesture {
                            withAnimation(.spring()){
                                self.show = false
                            }
                        }
                }
                // SHOW THIS SCROLLVIEW 3 SECONDS LATER
                ScrollView{
                    LazyVGrid(columns: gridItems){
                        ForEach(0..<10){ cell in
                            Text("\(cell)")
                        }
                    }
                }
                .animation(Animation.spring().delay(3)) // doesn't work!

            }
        } else {
            Rectangle()
                .matchedGeometryEffect(id: "A", in: namespace, isSource: !show)
                .frame(width: 100, height: 100)
                .onTapGesture {
                    withAnimation(.spring()){
                        self.show = true
                    }
                }
        }
    }
}

struct游乐场：视图{
@名称空间变量名称空间
@状态变量show=false
private let gridItems=[GridItem（.flexible（））]
var body：一些观点{
如果显示{
VStack{
ZStack（对齐：对齐（水平：尾随，垂直：顶部））{
矩形（）
.matchedGeometryEffect（id:“A”，位于：名称空间，isSource:show）
.框架（高度：300）
.frame（最大宽度：。无穷大）
图像（系统名：“xmark”）
.font（.system（大小：25））
.foregroundColor（.白色）
.背景（颜色.红色）
.填充（20）
.ontapsigne{
使用动画（.spring（））{
self.show=false
}
}
}
//3秒后显示此滚动视图
滚动视图{
LazyVGrid（列：gridItems）{
在这个场景中，我们需要为
ScrollView
制作单独的动画（和相关状态）

以下是可能的方法。使用Xcode 12.1/iOS 14.1进行测试


struct游乐场：视图{
@名称空间变量名称空间
@状态变量show=false
private let gridItems=[GridItem（.flexible（））]
@State private var showItems=false
var body：一些观点{
如果显示{
VStack{
ZStack（对齐：对齐（水平：尾随，垂直：顶部））{
矩形（）
.matchedGeometryEffect（id:“A”，位于：名称空间，isSource:show）
.框架（高度：300）
.frame（最大宽度：。无穷大）
图像（系统名：“xmark”）
.font（.system（大小：25））
.foregroundColor（.白色）
.背景（颜色.红色）
.填充（20）
.ontapsigne{
使用动画（.spring（））{
self.show=false
}
}
}
VStack{
如果显示项目{
滚动视图{
LazyVGrid（列：gridItems）{
ForEach（0。。
struct Playground: View {
    @Namespace var namespace
    @State var show = false
    private let gridItems = [GridItem(.flexible())]
    
    @State private var showItems = false
    
    var body: some View {
        
        if show {
            VStack{
                ZStack(alignment: Alignment(horizontal: .trailing, vertical: .top)){
                    Rectangle()
                        .matchedGeometryEffect(id: "A", in: namespace, isSource: show)
                        .frame(height: 300)
                        .frame(maxWidth: .infinity)
                    
                    Image(systemName: "xmark")
                        .font(.system(size: 25))
                        .foregroundColor(.white)
                        .background(Color.red)
                        .padding(20)
                        .onTapGesture {
                            withAnimation(.spring()){
                                self.show = false
                            }
                        }
                }
                
                VStack {
                    if showItems {
                        ScrollView{
                            LazyVGrid(columns: gridItems){
                                ForEach(0..<10){ cell in
                                    Text("\(cell)")
                                }
                            }
                        }
                    } else {
                        Spacer()
                    }
                }
                .onAppear { showItems = true }
                .onDisappear { showItems = false }
                .animation(Animation.spring().delay(3), value: showItems)
            }
        } else {
            Rectangle()
                .matchedGeometryEffect(id: "A", in: namespace, isSource: !show)
                .frame(width: 100, height: 100)
                .onTapGesture {
                    withAnimation(.spring()){
                        self.show = true
                    }
                }
        }
    }
}