在 SwiftUI 中平滑更改视图位置

Question

我正在尝试尽可能顺利地更改我的应用程序中的特定视图位置。 更改的条件是通过文本字段更改文本时：

struct ExploreView: View {
    @State var searchText : String = ""
    var body: some View {
        ZStack{
            Color(searchText == "" ? "RedColor" : "BlueColor").edgesIgnoringSafeArea(.top)
            VStack {
                if searchText == "" {
                    Spacer()
                }
                searchBarBottom(searchText: $searchText).shadow(radius: 5).padding(.vertical)
                if searchText != "" {
                    Spacer()
                }
            }
        }
    }
}

这是搜索栏底部：

struct searchBarBottom: View {
    @Binding var searchText : String
    var body: some View {
        HStack{
            HStack{
                if searchText == "" {
                    Image(systemName: "magnifyingglass").foregroundColor(.black)
                }
                TextField("search", text: $searchText)
                if searchText != "" {
                    Button(action: {
                        self.searchText = ""
                    }, label: {
                        Text("cancel")
                    })
                }
            }.padding(.horizontal).frame(height: 36).background(Color("GrayColor")).cornerRadius(5)
            if searchText == "" {
                HStack{
                    NavigationLink(destination: AddSpotView()) {
                        Image(systemName: "plus").resizable().frame(width: 17, height: 17).foregroundColor(.black)
                    }.frame(width: 36, height: 36).background(Color("GrayColor")).cornerRadius(5)
                    NavigationLink(destination: ExploreList()) {
                        Image(systemName: "list.bullet").resizable().frame(width: 17, height: 15).foregroundColor(.black)
                        }.frame(width: 36, height: 36).background(Color("GrayColor")).cornerRadius(5)
                }
            }
            }.padding(.horizontal).frame(width: UIScreen.main.bounds.width/1.1, height: 55).background(Color.white).clipped().shadow(radius: 5).cornerRadius(10)
    }
}

变化如下：

state 当 searchText = ""

state 当 searchText != ""

我目前正在使用 Spacer()，因为这是我发现的最简单的方法，但更改非常粗糙，我希望它平滑且易于使用。 关于我如何实现这一目标的任何想法？

谢谢！

Answer 1

只需添加 animation（使用 Xcode 11.4 / iOS 13.4 测试）

    ZStack{
        Color(searchText == "" ? "RedColor" : "BlueColor").edgesIgnoringSafeArea(.top)
        VStack {
            if searchText == "" {
                Spacer()
            }
            searchBarBottom(searchText: $searchText).shadow(radius: 5).padding(.vertical)
            if searchText != "" {
                Spacer()
            }
        }.animation(.default)       // << here !!
    }