Анимация панели инструментов при расширении панели поиска не работает SwiftUI

Question

Я хочу анимировать расширяющуюся панель поиска. Когда я нажимаю кнопку поиска, я хочу расширить панель поиска влево, а когда я закрываю текстовое поле поиска, свернуть вправо.

                 ToolbarItem(placement: .automatic) {
                    
                    HStack{
                        
                        if self.showSearchBar{
                            HStack{
                                
                                Image(systemName: "magnifyingglass")

                                
                                TextField("search from menu", text: self.$txtSearch)
                                
                                Button{
                                    
                                    withAnimation{
                                        self.showSearchBar.toggle()
                                    }
                                    
                                } label:{
                                    Image(systemName: "xmark")
                                }
                            }.frame(width: 300, height: 40)
                            
                            
                        }else{
                            Button{
                                                        
                                withAnimation{
                                    self.showSearchBar.toggle()
                                }
                                
                            } label: {
                                Image(systemName: "magnifyingglass")
                            }
                        }
                        
                    }.padding(self.showSearchBar ? 10 : 0)
                    .background(Color.white)
                    .cornerRadius(20)
                    
                }

Видео как обстоят дела сейчас: https://files.fm/f/au967z3bh

Я знаю, что можно плавно расширяться справа налево при расширении и слева направо при сворачивании. Как я могу добавить это в свой код?

Хочу подобное: https://files.fm/u/pgxtzvrk7

Answer 1

Если вы хотите, чтобы у него была анимация, вы не должны использоватьif {} else {}. Потому что, когда условие было изменено, между вашими представлениями ничего не было связано, поэтому вместо анимации двух представлений будет отображаться новый элемент пользовательского интерфейса.

Однако использование пространства имен анимации может быть решением вашей проблемы. Подробнее о@Namespace здесь .

Декларация:

      @Namespace private var animated

поместите его в структуру, содержащую ваши представления. Затем добавьте следующее свойство:

      .matchedGeometryEffect(id: "searchBar", in: animated)

так:

      HStack {
    if self.showSearchBar {
        HStack{
            Image(systemName: "magnifyingglass")
                // Here vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
                .matchedGeometryEffect(id: "searchBar", in: animated)
            
            TextField("Search from menu", text: .constant(""))
            
            Button {
                withAnimation{
                    self.showSearchBar.toggle()
                }
            } label: {
                Image(systemName: "xmark")
            }
        }
        .frame(width: 300, height: 40)
    } else {
        Button {
            withAnimation {
                self.showSearchBar.toggle()
            }
        } label: {
            Image(systemName: "magnifyingglass")
        }
        // Here vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
        .matchedGeometryEffect(id: "searchBar", in: animated)
    }
}
.padding(self.showSearchBar ? 10 : 0)
.background(Color.white)
.cornerRadius(20)

Надеюсь, это поможет!