SwiftUI：在 Single 和 HStack 视图之间制作动画

Posted 2023-02-24

【中文标题】SwiftUI：在 Single 和 HStack 视图之间制作动画

【英文标题】：SwiftUI: animating between Single and HStack views

【发布时间】：2019-11-26 16:06:54

【问题描述】：

目标：

1- 显示覆盖整个屏幕的视图（蓝色） 2-当点击底部（右上角）时，它会显示一个 HStack 动画右侧 HStack（绿色）“幻灯片偏移动画”。

import SwiftUI

struct ContentView: View 

    @State var showgreen = false


    var body: some View 


    NavigationView 

        HStack 
            Rectangle()
            .foregroundColor(.blue)

            if showgreen  
            Rectangle()
            .foregroundColor(.green)
            .offset(x: showgreen ? 0 : UIScreen.main.bounds.width)
            .animation(.easeInOut)
            

           

    .navigationBarItems(trailing:
      Button(action:  self.showgreen.toggle() ) 
              Image(systemName: "ellipsis")
              )
       

    .navigationViewStyle(StackNavigationViewStyle())


    


struct ContentView_Previews: PreviewProvider 
    static var previews: some View 
        ContentView()
        .colorScheme(.dark)
        .previewDevice("iPad Pro (12.9-inch) (3rd generation)")
    

代码有效，但我无法让绿色“幻灯片偏移动画”工作。非常感谢任何帮助！ :)

【参考方案1】：

而不是使用if 条件，您需要绿色矩形已经存在，并且在屏幕外。当showgreen 切换时，您需要缩小蓝色矩形的大小，这将为绿色矩形腾出空间。

struct ContentView: View 
    @State var showgreen = false

    var body: some View 
        NavigationView 
            HStack 
                Rectangle()
                    .foregroundColor(.blue)
                    .frame(width: showgreen ? UIScreen.main.bounds.width / 2 : UIScreen.main.bounds.width)
                    .animation(.easeInOut)

                Rectangle()
                    .foregroundColor(.green)
                    .animation(.easeInOut)
            
            .navigationBarItems(trailing:
                Button(action:  self.showgreen.toggle() ) 
                    Image(systemName: "ellipsis")
            )
        
        .navigationViewStyle(StackNavigationViewStyle())