子视图显示/隐藏过渡不起作用答案

【问题标题】：Subview showing/hiding transition not working子视图显示/隐藏过渡不起作用
【发布时间】：2023-02-15 09:07:18
【问题描述】：

仍然是 SwiftUI 动画的初学者并且正在为这个问题而苦苦挣扎。

我有一个自定义搜索栏，类似于它的原生搜索栏。除了插入/删除视图动画外，一切正常。这是正在发生的事情：

无论是否正在编辑，搜索栏都会从左向右滑动。
如果用户点击搜索栏，X 和取消都应淡入。

如果按下“取消”按钮，X 和“取消”都应淡出。

只有第 1 步是正确的动画，第 2 步和第 3 步不是。

这是搜索栏组件的代码：

struct CustomSearchBar: View {
    var prompt: String
    @Binding var query: String
    @FocusState private var isEditing: Bool
    @State var onSubmit: () -> Void
    
    var body: some View {
        HStack(alignment: .center) {
            TextField(prompt, text: $query)
                .onSubmit(onSubmit)
                .focused($isEditing)
                .padding(8)
                .padding(.horizontal, 25)
                .background(Color(.systemGray6))
                .overlay(
                    HStack {
                        Image(systemName: "magnifyingglass")
                            .foregroundColor(.gray)
                            .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
                            .padding(.leading, 8)
                        
                        if isEditing {
                            Button {
                                self.query = ""
                            } label: {
                                Image(systemName: "multiply.circle.fill")
                                    .foregroundColor(.gray)
                                    .padding([.leading, .trailing], 8)
                            }
                            .transition(.opacity)
                        }
                    }
                )
                .onTapGesture {
                    self.isEditing = true
                }
                .submitLabel(.search)
                .transition(.slide)
            
            if isEditing {
                Button {
                    self.isEditing = false
                    self.query = ""
                } label: {
                    Text("Cancel")
                        .foregroundColor(.red)
                }
                .padding(.trailing, 10)
                .transition(.opacity)
            }
        }
        .animation(.linear(duration: 0.3), value: isEditing)
    }
}

以及如何使用它：

struct Search: View {
    @State var query: String = ""
    @FocusState private var searchIsFocused: Bool

    var body: some View {
        CustomSearchBar(prompt: "Search", query: $query, onSubmit: { submittedSearch() })
            .focused($searchIsFocused)
    }

    func submittedSearch() {
        // do something with search
    }
}

我尝试将 self.isEditing = false 包装在 withAnimation 块中，但它根本没有动画。我发现它使用 animation 修饰符更有意义，但它没有检测子视图插入/删除。我遇到了几个例子，它们都像我发布的那样工作，但不幸的是，我无法在我的案例中发现错误......

【问题讨论】：

标签： swiftui transition ios-animations

【解决方案1】：

解决方法是，仅将 @FocusState 用于 focused 修饰符，并创建一个 @State 变量来控制动画。

@FocusState private var focused: Bool {
    didSet {
        self.editing = self.focused
    }
}
@State private var editing = false

【讨论】：

好点，它奏效了！谢谢！