ios - 如何使 SwiftUI 循环中的元素全屏显示？与 Apple 一样，当今的应用程序

Question

Here's a gif of what I currently have

在这里尝试了很多东西，比如 offset 和 zIndex，但它们不会改变位置，我正在寻找像 css 中的绝对位置这样的东西来使卡片全屏显示。

    var body: some View {
    VStack {
        Text("")
    }
    .frame(minWidth: 0, maxWidth: .infinity)
    .frame(height: show ? UIScreen.main.bounds.height : 200)
    .zIndex(show ? 1 : 0)
    .background(/*@START_MENU_TOKEN@*/Color.blue/*@END_MENU_TOKEN@*/)
    .cornerRadius(show ? 0 : 20)
    .padding(show ? 0 : 30)
    .offset(y: show ? 0 : viewState.height)
    .animation(.easeInOut(duration: 0.3))
}

Answer 1

您可能想使用GeometryReader，并与edgesIgnoringSafeArea结合使用，如下所示:

struct ContentView: View {

    @State var show = false

    var body: some View {
        GeometryReader { geo in
            VStack { Text("") }
                .frame(minWidth: 0, maxWidth: .infinity)
                .frame(height: self.show ? geo.size.height : 200)
                .background(/*@START_MENU_TOKEN@*/Color.blue/*@END_MENU_TOKEN@*/)
                .cornerRadius(self.show ? 0 : 20)
                .padding(self.show ? 0 : 30)
                .offset(y: self.show ? 0 : 0)
                .animation(.easeInOut(duration: 0.3))
                .onTapGesture {
                    self.show.toggle()
            }
        }.edgesIgnoringSafeArea(.all)
    }
}

输出:

<小时/>

注意这只是对原始问题和原始提供的代码的回答，如果您想以其他方式嵌入卡片，例如使用 ScrollView，您应该考虑当然，对原始代码进行一些更改。例如:

struct CardView: View {
    @Binding var show: Bool

    var body: some View {

        Rectangle()
            .foregroundColor(.blue)
            .cornerRadius(self.show ? 0 : 20)
            .padding(self.show ? 0 : 30)
            .animation(.easeInOut(duration: 0.3))
    }
}

extension Int: Identifiable { public var id: Int { self } }

struct ContentView: View {

    @State var show = false

    var body: some View {
        GeometryReader { geo in
            ScrollView {
                VStack {
                    ForEach(0..<1) { item in
                        CardView(show: self.$show)
                            .frame(height: self.show ? geo.size.height : 200)
                        .onTapGesture { self.show.toggle() }


                    }
                }
            }
        }.edgesIgnoringSafeArea(.all)
    }
}