如何让 SwiftUI 循环中的元素全屏显示？与 Apple 一样，今日应用

Posted 2023-02-24

【中文标题】如何让 SwiftUI 循环中的元素全屏显示？与 Apple 一样，今日应用

【英文标题】：How do you make an element in a SwiftUI loop full screen? Like Apple's, App of the day

【发布时间】：2019-11-24 21:16:10

【问题描述】：

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))

【参考方案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)
    

【讨论】：

非常感谢您的帮助@mojtaba-hosseini！我可以用一张卡片复制你的动画，但是当它是一个带有卡片循环的 ScrollView 时，它不适用，有什么想法吗？ ScrollView ForEach() item in Card(item: item) 在这种情况下卡片组件没有动画全屏

Output for me when in a loop.

因为几何体代表父视图。当您将其嵌入到另一个视图中时，您应该考虑到几何数据会相应地发生变化。我为您添加了另一个示例。希望它能指导您实现所需的目标。