@FocusState SwiftUI 的动画更改答案

【问题标题】：Animating changes to @FocusState SwiftUI@FocusState SwiftUI 的动画更改
【发布时间】：2022-01-14 18:04:59
【问题描述】：

我正在使用新的@FocusState 来控制我的视图如何响应用户决定开始将信息输入到文本字段中。我目前的需要是在我的顶视图周围环绕一个动画，当键盘向上移动时离开屏幕。通常这种事情可以通过简单地将 withAnimaition() 包裹在一个布尔切换上来完成，但是由于 Swift 在后台切换我的焦点状态布尔，我不能以这种方式包裹一个动画。我应该怎么做呢？

这是一个最小的可重现示例。基本上，我想通过更改我的焦点状态 isFocused var 来制作顶部（红色）视图离开/返回视图的动画。

struct ContentView: View {
    @State var text: String = ""
    @FocusState var isFocused: Bool
    var body: some View {
        ZStack {
            VStack {
                if !isFocused {
                    Text("How to Animate this?")
                        .frame(width: 300, height: 300)
                        .background(Color.red)
                        .animation(.easeInOut(duration: 5), value: isFocused)
                }
            
                Text("Middle Section")
                    .frame(width: 300, height: 300)
                    .background(Color.green)
            
                Spacer()
            
                TextField("placeholder", text: $text)
                    .focused($isFocused)
            
            }
        
            if isFocused {
                Color.white.opacity(0.1)
                    .onTapGesture {
                        isFocused = false
                    } 
            }
        }
    }
}

我不认为当前在顶视图上的动画修改器在做任何事情，但我想那是我将放置一些动画代码的地方。

【问题讨论】：

标签： animation swiftui

【解决方案1】：

这是可行的。我以前这样做是为了在 @FocusState 属性更改其值时发生动画。无法真正告诉你为什么，这只是我通过反复试验得出的结论。

struct ContentView: View {
    @State var text: String = ""
    @FocusState var isFocused: Bool
    @State private var showRedView = false
    var body: some View {
        ZStack {
            VStack {
                if !showRedView {
                    Text("How to Animate this?")
                        .frame(width: 300, height: 300)
                        .background(Color.red)
                }
                
                Text("Middle Section")
                    .frame(width: 300, height: 300)
                    .background(Color.green)
                
                Spacer()
                
                TextField("placeholder", text: $text)
                    .focused($isFocused)
                
            }
            .onChange(of: isFocused) { bool in
                withAnimation(.easeInOut(duration: 5)) {
                    showRedView = bool
                }
            }
            
            if isFocused {
                Color.white.opacity(0.1)
                    .onTapGesture {
                        isFocused = false
                    }
            }
        }
    }
}

【讨论】：