What’s the appropriate structure for attaining a 2 column grid of playing cards that develop right into a full display screen view when tapped upon in SwiftUI?

I’m attempting to make a notes view the place the person notes will probably be displayed in a scrollable grid of two columns. I need to make it in order that if a notice card is tapped upon, it opens the total notice and takes over all the display screen. I am unable to simply use withAnimation as a result of that incorporates the cardboard contained in the LazyVGrid that I’m utilizing. I attempted utilizing matchedGeometry as follows however that brings within the expanded view from the highest left as a substitute of increasing the cardboard.

struct CardView: View {
    
    let title: String
    
    let nameSpace: Namespace.ID
    
    var physique: some View {
        VStack() {
            Textual content(title)
                .font(.headline)
                .foregroundStyle(.white)
        }
        .body(width: 150, top: 200)
        .background(.blue)
        .matchedGeometryEffect(id: "card", in: nameSpace)
    }
}

struct ExpandedCardView: View {
    
    let title: String
    
    let nameSpace: Namespace.ID
    
    let screenWidth = UIScreen.fundamental.bounds.width
    let screenHeight = UIScreen.fundamental.bounds.top

    
    var physique: some View {
        
        VStack {
            Textual content(title)
                .font(.title)
                .foregroundStyle(.white)
        }
        .body(width: screenWidth, top: screenHeight)
        .background(.blue)
        .matchedGeometryEffect(id: "card", in: nameSpace)
    }
}

struct ParentView: View {
    
    @State personal var cardExpanded: Bool = false
    @Namespace personal var nameSpace
    
    var physique: some View {
        
        ZStack {
            
            if (cardExpanded == false) {
                CardView(title: "This can be a title", nameSpace: nameSpace)
                    .onTapGesture {
                        withAnimation {
                            cardExpanded.toggle()
                        }

                    }
            }
            else {
                ExpandedCardView(title: "This can be a title", nameSpace: nameSpace)
                    .onTapGesture {
                        withAnimation {
                            cardExpanded.toggle()
                        }
                    }
                    .zIndex(1)
            }
        }
    }
}

I’m not positive easy methods to make this work. The look I’m attempting to attain is just like how tabs look within the Safari app on iOS. Additionally it is just like how the Recordsdata app works on iOS. Following is an image of how the tabs look in Safari:

I actually preferred the animation I bought through the use of withAnimation however due to the cardboard not with the ability to escape the LazyVGrid, it did not work as supposed. The code utilizing withAnimation is as follows:

struct CardView: View {
    @State var isExpanded: Bool = false
    let title: String
    
    let screenWidth = UIScreen.fundamental.bounds.width
    let screenHeight = UIScreen.fundamental.bounds.top
    
    var physique: some View {
        VStack() {
            Textual content(title)
                .font(.headline)
                .scaleEffect(isExpanded ? 2 : 1)
                .foregroundColor(.white)
        }
        .body(
            width: isExpanded ? screenWidth : 150,
            top: isExpanded ? screenHeight : 200
        )
        .background(Colour.blue)
        .zIndex(isExpanded ? 1 : 0)
        .onTapGesture {
            withAnimation {
                isExpanded.toggle()
            }
        }
    }
}

struct ParentView: View {
    
    personal let columns = [
        GridItem(.flexible(), spacing: 16),
        GridItem(.flexible(), spacing: 16)
    ]
    
    var physique: some View {
        
        ZStack {
            
            ScrollView {
                
                LazyVGrid(columns: columns) {
                    
                    ForEach(0..<20) { _ in
                        CardView(title: "This can be a title")
                    }
                    
                }
            }
            
        }
        
    }
}

I’d recognize if somebody may assist me perceive what’s appropriate structure to achieive that look that I’m attempting to.