iOS 15如何实现搜索栏默认隐藏、随滚动显示/隐藏的效果？

要实现iOS“设置”APP的搜索栏交互逻辑，只需调整searchable的显示模式，并配合导航栏的标题样式即可，具体修改如下：

struct ContentView: View {
  
  @State var search = ""
  
  var body: some View {
    NavigationView {
      List {
        Text("Hello World 1")
        Text("Hello World 2")
        Text("Hello World 3")
        // 增加更多列表项方便测试滚动交互
        Text("Hello World 4")
        Text("Hello World 5")
        Text("Hello World 6")
        Text("Hello World 7")
        Text("Hello World 8")
      }
      .navigationTitle("Menu")
      .navigationBarTitleDisplayMode(.large)
    }
    .searchable(
      text: $search,
      placement: .navigationBarDrawer(displayMode: .automatic)
    )
  }
}

关键修改说明： #

1. 调整搜索栏显示模式：将原代码中的.always改为.automatic，这是实现交互的核心。.automatic的默认行为完全匹配需求：

   • 视图初始化时隐藏搜索栏，列表从第一个条目开始展示；
   • 用户向下滚动列表时，搜索栏随导航栏展开显示；
   • 向上滚动列表时，搜索栏随导航栏收起；
   • 滚动到列表底部时，由于无法继续向上滚动，搜索栏会再次显示。

2. 匹配设置APP的导航栏样式：添加.navigationBarTitleDisplayMode(.large)，确保导航栏使用大标题模式，和“设置”APP的视觉及交互逻辑完全对齐。如果不需要大标题，也可以替换为.inline，但.large更贴近原生设置的体验。

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