Ios 迅捷：我该怎么做；放大“；到平铺界面上的特定CardView？

我正在尝试用CardView构建一个平铺界面。我希望用户能够点击一张卡片，并将该卡片展开以占用可用空间，本质上是“放大”内容。问题是，这些卡只会从其中心扩展，而不会扩展到屏幕的中心。我已经尝试了我能想到的一切，动画的位置，偏移，甚至尝试与GeometryReader混乱，但我不能让这个简单的事情工作。是时候问问专业人士了

以下是ContentView的代码：

import SwiftUI

struct ContentView: View {

    var body: some View {
        VStack() {
            HStack(alignment: .center) {
                CardView(cardColor: Color.red)
                CardView(cardColor: Color.blue)
                CardView(cardColor: Color.purple)
            }
            HStack(alignment: .center) {
                CardView(cardColor: Color.green)
                CardView(cardColor: Color.gray)
                CardView(cardColor: Color.black)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice(PreviewDevice(rawValue: "iPad Pro (9.7-inch)"))
        .previewLayout(PreviewLayout.fixed(width: 2048, height: 1536))
    }
}

在本例中，共有2行3个瓷砖，但在最后一行中，我希望能够支持多达9个瓷砖

这是CardView的代码：

import SwiftUI

struct CardView: View {

    @State var show: Bool = false

    var cardColor = Color.blue
    let message = "Animatable cards with spring animation applied, custom frame and padding.  Also uses SFSymbol for icon in the bottom button.  Tap button to see the fill stle of this icon."

    var body: some View {

        VStack() {
            Text("Card in SwiftUI")
                .foregroundColor(.white)
                .font(.largeTitle)
                .bold()
                .padding(.top, self.show ? 30 : 20)
                .padding(.bottom, self.show ? 20 : 0)
                .shadow(radius: 2)

            Text(self.message)
                .foregroundColor(.white)
                .multilineTextAlignment(.center)
                .lineLimit(.none)
                .animation(.spring())

            Spacer()

                HStack() {
                    Image(systemName: self.show ? "slash.circle.fill" : "slash.circle")
                        .foregroundColor(Color.orange)
                        .font(Font.title.weight(.semibold))
                        .imageScale(.small)
                        .shadow(radius: 2)

                    Text(self.show ? "To Card" : "To Area")
                        .foregroundColor(Color.yellow)
                        .font(Font.title.weight(.semibold))
                        .shadow(radius: 2)
                    }
                    .padding(.bottom, self.show ? 20 : 15)

            }
            .padding()
            .padding(.top, 15)
            .background(self.cardColor)
            .frame(width: self.show ? UIScreen.screenWidth : 290, height: self.show ? UIScreen.screenHeight : 260, alignment: .center)
            .cornerRadius(30)
            .shadow(color: Color.gray, radius: 5, x: 5, y: 5)
            .animation(.spring())
            .edgesIgnoringSafeArea(.all)
            .onTapGesture {
                self.show.toggle()
        }
    }
}

---

我试图使这尽可能简单和独立，但我意识到我的问题的一部分可能是我试图影响的坐标系的范围。帮个忙

你可能会发现我对类似主题的回答很有帮助你可能会发现我对类似主题的回答很有帮助