在 SwiftUI 中平滑更改视图位置

Question

I am trying to change a specific view location in my app as smoothly as possible. The condition on the change is when a text is change via a textfield:

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

here is searchBarBottom:

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

the change is as follows:

state when searchText = ""

state when searchText != ""

I am currently using Spacer() because that is the easiest way I found but the change is really rough and I want it to be smooth and easy on the eye. Any ideas on how I might achieve that?

Thanks!

Answer 1

Just add animation (tested with 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 !!
    }