swiftui-ui-patterns - searchable
发布时间:2026/10/12 3:42:47 锦皓数字建站

可搜索Searchable意图使用searchable添加带可选作用域和异步结果的原生搜索 UI。核心模式将searchable(text:)绑定到本地状态。对多种搜索模式使用.searchScopes。使用.task(id: searchQuery)或防抖任务避免过度请求。结果加载时显示占位或进度状态。示例带作用域的可搜索MainActorstructExploreView:View{StateprivatevarsearchQueryStateprivatevarsearchScope:SearchScope.allStateprivatevarisSearchingfalseStateprivatevarresults:[SearchResult][]varbody:someView{List{ifisSearching{ProgressView()}else{ForEach(results){resultinSearchRow(result:result)}}}.searchable(text:$searchQuery,placement:.navigationBarDrawer(displayMode:.always),prompt:Text(Search)).searchScopes($searchScope){ForEach(SearchScope.allCases,id:\.self){scopeinText(scope.title)}}.task(id:searchQuery){awaitrunSearch()}}privatefuncrunSearch()async{guard!searchQuery.isEmptyelse{results[]return}isSearchingtruedefer{isSearchingfalse}try?awaitTask.sleep(for:.milliseconds(250))resultsawaitfetchResults(query:searchQuery,scope:searchScope)}}应保留的设计选择当搜索为空或没有结果时显示占位。防抖输入避免刷爆网络。将搜索状态保持在视图本地。陷阱避免对空字符串执行搜索。获取期间不要阻塞主线程。
锦
锦皓数字建站
深耕本土企业品牌数字化升级,专注原创端正雅致商务官网,从视觉设计到稳定运维全程保驾护航。