普通搜索视图：
举例子：随便写的一个index.ets为了方便跳转搜索页面
index.ets
代码：
@Entry
@Component
struct Index {@Provide pageStack: NavPathStack = new NavPathStack()build() {// 提供页面栈对象Navigation(this.pageStack){Button('搜索').onClick(()=>{this.pageStack.pushPath({name:'SearchView'})})}.hideTitleBar(true).mode(NavigationMode.Stack)}
}
首先是先从首页跳转过来（跳转之前要配路由）
默认是没有route_map.json,需要自己新建
代码如下：
{"routerMap": [{"name": "SearchView","pageSourceFile": "src/main/ets/view/SearchView.ets","buildFunction": "SearchViewBuilder","data": {"description": "this is SearchView"}} ]
}
需要配置权限：代码：
"routerMap": "$profile:route_map",
在src下新建的两个view目录（新建SearchView（搜索页）SearchResultView ）
源代码如下：（SearchView）
import { window } from '@kit.ArkUI'
@Builder
function SearchViewBuilder() {NavDestination() {SearchView()}.hideTitleBar(true)
}
@Component
struct SearchView {@StorageProp('safeTop') safeTop: number = 0@State keyword: string = ''@Consume pageStack: NavPathStackaboutToAppear(): void {window.getLastWindow(getContext()).then((win) => {win.setWindowSystemBarProperties({ statusBarContentColor: '#FFFFFF' })})}aboutToDisappear(): void {window.getLastWindow(getContext()).then((win) => {win.setWindowSystemBarProperties({ statusBarContentColor: '#000000' })})}build() {Column() {// searchRow() {Image($r('app.media.ic_public_left')).width(24).aspectRatio(1).fillColor(Color.White).margin(13).onClick(() => {this.pageStack.pop(true)})Search({ placeholder: '商品关键字...', value: $$this.keyword }).searchIcon({ src: $r('app.media.ic_public_search'), color: Color.Gray }).placeholderColor(Color.Gray).placeholderFont({ size: 14 }).searchButton('搜索', { fontSize: 14, fontColor:Color.Red }).backgroundColor(Color.White).textFont({ size: 14 }).layoutWeight(1).padding(0).margin(0).height(36).caretStyle({ color: Color.Red }).defaultFocus(true).onSubmit((value) => {this.pageStack.pushPathByName('SearchResultView', value)})}.padding({ top: this.safeTop, right: 16 }).linearGradient({angle: 135,colors: [['#d13871', 0], ['#cc5a37', 1]]})}}
}
对搜索按钮解释
// 创建一个搜索组件，设置占位符和初始值
Search({ placeholder: '商品关键字...', value: $$this.keyword })// 配置搜索图标，包括图标资源和颜色.searchIcon({ src: $r('app.media.ic_public_search'), color: Color.Gray })// 设置占位符颜色.placeholderColor(Color.Gray)// 设置占位符字体大小.placeholderFont({ size: 14 })// 配置搜索按钮文本和样式.searchButton('搜索', { fontSize: 14, fontColor:Color.Red })// 设置组件背景色.backgroundColor(Color.White)// 设置文本字体大小.textFont({ size: 14 })// 设置布局权重.layoutWeight(1)// 移除内边距.padding(0)// 移除外边距.margin(0)// 固定组件高度.height(36)// 设置光标样式.caretStyle({ color: Color.Red })// 设置默认焦点.defaultFocus(true)// 定义提交事件处理函数.onSubmit((value) => {// 提交时将搜索结果页面添加到页面栈this.pageStack.pushPathByName('SearchResultView', value)})
// 添加顶部和右侧内边距
}.padding({ top: this.safeTop, right: 16 })
// 设置线性渐变样式
.linearGradient({angle: 135,colors: [['#d13871', 0], ['#cc5a37', 1]]
})