ios SwiftUI:可搜索奇怪的推送动画?

nfeuvbwi  于 2022-11-26  发布在  iOS
关注(0)|答案(1)|浏览(126)

下面的代码:

enum ContentViewRouter {
    case details
}

struct ContentView: View {
    
    var body: some View {
        
        NavigationStack {
            ZStack {
                NavigationLink(value: ContentViewRouter.details) {
                    Text("Push")
                }
            }
            .navigationDestination(for: ContentViewRouter.self) { destiantion in
                switch destiantion {
                case .details:
                    DetailsView()
                }
            }
            .navigationTitle("TEST")
        }
    }
    
}

struct DetailsView: View {
    
    @State var query = ""
    
    var body: some View {
        
        Form {
            Section("TEST") {
                Text("DETAILS")
            }
        }
        .searchable(text: $query)
        .navigationTitle("DETAILS")
        
    }
    
}

按下详细信息视图时,将创建以下动画:

我想摆脱这个看起来很奇怪的动画“小故障”:

我怎样才能让推送动画在搜索栏一瞬间不出现然后又消失的情况下顺利进入?看起来像是一个bug或者我做错了?

jdzmm42g

jdzmm42g1#

我认为这个问题是因为你有.searchable,它会创建搜索栏,目前与你的.navigationTitle冲突,两者都在顶部。也许搜索栏不知道放在哪里,因为.navigationTitle

**更新:**在做了一些研究之后,我发现搜索栏.automatic中的行为可能是错误的

有三种解决方法
1.如果要保留搜索栏,请使用NavigationView来拆分定义导航标题和搜索栏

struct DetailsView: View {
    @State var query = ""
    
    var body: some View {
        NavigationView {
            Form {
                Section("TEST") {
                    Text("DETAILS")
                }
            }
            .searchable(text: $query)
        }
        .navigationTitle("DETAILS")
        
    }
}

1.保持搜索栏始终显示

struct DetailsView: View {
    @State var query = ""
    var body: some View {
        
        Form {
            Section("TEST") {
                Text("DETAILS")
            }
        }
        .searchable(text: $query, placement: .navigationBarDrawer(displayMode: .always))
        .navigationTitle("DETAILS")
    }
}

1.如果要完全删除搜索栏

struct DetailsView: View {
    
    @State var query = ""
    
    var body: some View {
        
        Form {
            Section("TEST") {
                Text("DETAILS")
            }
        }
        //.searchable(text: $query) // remove this
        .navigationTitle("DETAILS")
        
    }   
}

相关问题