工具栏动画上扩展搜索栏不工作swiftui

lawou6xi 于 2023-03-17 发布在 Swift

关注(0)|答案(1)|浏览(141)

我想动画扩展搜索栏。当我按下搜索按钮时，我想向左扩展搜索栏，当我关闭搜索文本字段时，向右折叠。

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

swift

来源：https://stackoverflow.com/questions/75713061/toolbar-animation-on-extending-search-bar-does-not-work-swiftui

1条答案

按热度按时间

6kkfgxo01#

如果你想让它有动画效果，你不能使用if {} else {}，因为当条件改变时，视图之间没有任何链接，所以它将呈现一个新的UI元素，而不是动画两个视图。
但是，使用动画命名空间可能是解决问题的方法。阅读有关@Namespacehere的详细信息。
声明：

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

希望这能有所帮助！

赞(0）回复(0）举报 2023-03-17

我来回答

工具栏动画上扩展搜索栏不工作swiftui

1条答案

相关问题

热门标签

最新问答