SwiftUI .searchable修饰符实现下拉List时显示搜索栏的方法

要实现搜索栏初始隐藏、下拉列表时才显示的效果，只需给.searchable修饰符添加placement参数，指定为.navigationBarDrawer(displayMode: .automatic)即可。该配置会让搜索栏默认隐藏在导航栏下方，当用户下拉列表（滚动到顶部后继续下拉）时自动滑出显示。

修改后的完整代码如下：

import SwiftUI

struct ContentView: View {
    let names = ["Holly", "Josh", "Rhonda", "Yvonne", "Lucy", "Tim", "Steve", "Sandy", "Bob", "Brian"]
    @State private var searchText = ""

    var body: some View {
        NavigationStack {
            List(searchResults.indices, id: \.self) { index in
                Text("\(searchResults[index])")
            }
            // 添加placement参数配置搜索栏的显示逻辑
            .searchable(text: $searchText, placement: .navigationBarDrawer(displayMode: .automatic))
        }
        .navigationBarTitleDisplayMode(.inline)
    }

    var searchResults: [String] {
        if searchText.isEmpty {
            return names
        } else {
            let filteredNames = names.filter { $0.contains(searchText) }
            return filteredNames.isEmpty ? names : filteredNames
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

补充说明 #

• .navigationBarDrawer(displayMode: .automatic)是iOS 16及以上版本支持的配置，会自动根据滚动状态控制搜索栏的显示/隐藏，完全匹配你需要的初始隐藏、下拉触发显示的需求。
• 若需更自定义的控制逻辑，可改用.navigationBarDrawer(displayMode: .alwaysHidden)，再结合@State变量手动切换搜索栏的显示状态，但.automatic已经能覆盖绝大多数场景的需求。

内容的提问来源于stack exchange，提问作者frunny