desc:搜索其他ui 适配折叠屏

@@ -146,7 +146,7 @@ export struct SearchComponent {
         Scroll(this.scroller) {
           Column() {
             if(this.searchHistoryData!=null && this.searchHistoryData.length>0){
-              SearchHistoryComponent({ searchHistoryData: $searchHistoryData, onDelHistory: (): void => this.getSearchHistoryData(),onGetSearchRes: (item,index): void => this.getSearchHistoryResData(item,index),onCloseInput : (): void => this.stopInput() })
+              SearchHistoryComponent({ searchHistoryData: $searchHistoryData, onDelHistory: (): void => this.getSearchHistoryData(),onGetSearchRes: (item,index): void => this.getSearchHistoryResData(item,index),onCloseInput : (): void => this.stopInput(),percent:this.percent })
             }
 
             if(this.searchHistoryData.length>0){
@@ -175,10 +175,10 @@ export struct SearchComponent {
               this.getSearchHistoryData()
               this.getSearchInputResData(this.searchText)
             }
-          }})
+          },percent:this.percent})
         } else {
           //联想搜索
-          SearchRelatedComponent({relatedSearchContentData:$relatedSearchContentsData,onGetSearchRes: (item): void => this.getSearchRelatedResData(item),searchText:this.searchText})
+          SearchRelatedComponent({relatedSearchContentData:$relatedSearchContentsData,onGetSearchRes: (item): void => this.getSearchRelatedResData(item),searchText:this.searchText,percent:this.percent})
         }
       }
     }.height('100%')
@@ -337,20 +337,22 @@ export struct SearchComponent {
                 }
               }
             })
-        }.padding({right:`${this.calcHeight(70)}lpx`})
-        .layoutWeight(1)
 
-        Image($r('app.media.search_input_del_icon'))
-          .width(`${this.calcHeight(31)}lpx`)
-          .height(`${this.calcHeight(31)}lpx`)
-          .objectFit(ImageFit.Auto)
-          .interpolation(ImageInterpolation.Medium)
-          .margin({left:`${this.calcHeight(495)}lpx`})
-          .onClick(()=>{
-            this.searchText = ""
-          })
-          .visibility(StringUtils.isEmpty(this.searchText) ? Visibility.Hidden : Visibility.Visible)
+          Image($r('app.media.search_input_del_icon'))
+            .width(`${this.calcHeight(31)}lpx`)
+            .height(`${this.calcHeight(31)}lpx`)
+            .objectFit(ImageFit.Auto)
+            .interpolation(ImageInterpolation.Medium)
+            .onClick(()=>{
+              this.searchText = ""
+            })
+            .offset({x:10})
+            .enabled(true)
+            .visibility(StringUtils.isEmpty(this.searchText) ? Visibility.Hidden : Visibility.Visible)
 
+        }.padding({right:`${this.calcHeight(70)}lpx`})
+        .layoutWeight(1)
+        .justifyContent(FlexAlign.SpaceBetween)
       }
       .backgroundImage($r('app.media.search_page_input_bg'))
       .backgroundImageSize(ImageSize.Cover)

@@ -27,6 +27,7 @@ export struct SearchHistoryComponent{
     alignment: DialogAlignment.Center,
     customStyle: true
   })
+  @Prop percent:number = 1
 
   onAccept(){
     console.info('Callback when the second button is clicked')
@@ -48,14 +49,14 @@ export struct SearchHistoryComponent{
         Text("搜索历史")
           .textAlign(TextAlign.Center)
           .fontWeight(FontWeight.Regular)
-          .fontSize('27lpx')
-          .lineHeight('38lpx')
+          .fontSize(`${this.calcHeight(27)}lpx`)
+          .lineHeight(`${this.calcHeight(38)}lpx`)
           .fontColor($r('app.color.color_999999'))
-          .height('38lpx')
+          .height(`${this.calcHeight(38)}lpx`)
 
         Image($r('app.media.search_delete_icon'))
-          .height('31lpx')
-          .width('31lpx')
+          .height(`${this.calcHeight(31)}lpx`)
+          .width(`${this.calcHeight(31)}lpx`)
           .interpolation(ImageInterpolation.High)
           .objectFit(ImageFit.Auto)
           .onClick(()=>{
@@ -63,7 +64,7 @@ export struct SearchHistoryComponent{
             this.dialogController.open()
           })
       }.justifyContent(FlexAlign.SpaceBetween)
-      .margin({bottom:'17lpx'})
+      .margin({bottom:`${this.calcHeight(17)}lpx`})
       .width('100%')
 
       Grid(){
@@ -72,14 +73,14 @@ export struct SearchHistoryComponent{
             Row(){
               Text(`${item.searchContent}`)
                 .fontColor($r('app.color.color_222222'))
-                .fontSize('31lpx')
+                .fontSize(`${this.calcHeight(31)}lpx`)
                 .fontWeight(FontWeight.Regular)
-                .lineHeight('46lpx')
+                .lineHeight(`${this.calcHeight(46)}lpx`)
                 .maxLines(1)
-                .constraintSize({maxWidth:index%2 === 0?'270lpx':'230lpx'})
+                .constraintSize({maxWidth:index%2 === 0?`${this.calcHeight(270)}lpx`:`${this.calcHeight(230)}lpx`})
                 .textOverflow({ overflow: TextOverflow.Ellipsis })
                 .textAlign(TextAlign.Start)
-                .margin({left:index%2 === 0?'0lpx':'23lpx'})
+                .margin({left:index%2 === 0?'0lpx':`${this.calcHeight(23)}lpx`})
                 .onClick(()=>{
                   if (this.onGetSearchRes !== undefined) {
                     this.onGetSearchRes(item.searchContent,index)
@@ -87,9 +88,9 @@ export struct SearchHistoryComponent{
                 })
 
               Image($r('app.media.search_item_delete_icon'))
-                .width('23lpx')
-                .height('23lpx')
-                .margin({left:'4lpx'})
+                .width(`${this.calcHeight(23)}lpx`)
+                .height(`${this.calcHeight(23)}lpx`)
+                .margin({left:`${this.calcHeight(4)}lpx`})
                 .interpolation(ImageInterpolation.Medium)
                 .objectFit(ImageFit.Auto)
                 .onClick(()=>{
@@ -103,19 +104,19 @@ export struct SearchHistoryComponent{
 
               if(index%2 === 0 && index != this.searchHistoryData.length-1 ){
                 Divider()
-                  .width('2lpx')
-                  .height('23lpx')
+                  .width(`${this.calcHeight(2)}lpx`)
+                  .height(`${this.calcHeight(23)}lpx`)
                   .color($r('app.color.color_CCCCCC'))
-                  .strokeWidth('2lpx')
+                  .strokeWidth(`${this.calcHeight(2)}lpx`)
                   .vertical(true)
               }
             }.height('100%')
             .alignItems(VerticalAlign.Center)
             .width('100%')
-            .margin({left:index%2 === 1?'23lpx':'0lpx'})
+            .margin({left:index%2 === 1?`${this.calcHeight(23)}lpx`:'0lpx'})
 
           }
-          .height('46lpx')
+          .height(`${this.calcHeight(46)}lpx`)
           .alignSelf(ItemAlign.Center)
 
         })
@@ -123,9 +124,9 @@ export struct SearchHistoryComponent{
       .height(this.getCategoryViewHeight())
       .rowsTemplate(this.getCategoryRowTmpl())
       .columnsTemplate('1fr 1fr')
-      .rowsGap('23lpx')
+      .rowsGap(`${this.calcHeight(23)}lpx`)
     }
-    .margin({top:"36lpx",bottom:'46lpx'})
+    .margin({top:`${this.calcHeight(36)}lpx`,bottom:`${this.calcHeight(46)}lpx`})
   }
 
   getCategoryRowCount() {
@@ -140,6 +141,10 @@ export struct SearchHistoryComponent{
   }
 
   getCategoryViewHeight() {
-    return `${50 * this.getCategoryRowCount()}lpx`;
+    return `${50 * this.percent * this.getCategoryRowCount()}lpx`;
+  }
+
+  calcHeight(value:number): number{
+    return value * this.percent
   }
 }
\ No newline at end of file

@@ -10,6 +10,7 @@ export struct SearchRelatedComponent {
   @Link relatedSearchContentData: SearchRelatedItem[]
   onGetSearchRes?: (item:string) => void;
   @Prop searchText: string
+  @Prop percent:number = 1
 
   build() {
     Column() {
@@ -19,19 +20,19 @@ export struct SearchRelatedComponent {
             Column(){
               Row() {
                 Image($r('app.media.search_related_item_icon'))
-                  .width('31lpx')
-                  .height('31lpx')
+                  .width(`${this.calcHeight(31)}lpx`)
+                  .height(`${this.calcHeight(31)}lpx`)
                   .objectFit(ImageFit.Auto)
-                  .margin({ right: '10lpx' })
+                  .margin({ right:`${this.calcHeight(10)}lpx` })
                   .interpolation(ImageInterpolation.High)
 
                 Text(){
                   ForEach(item.data_arr,(item:string)=>{
                     Span(item)
                       .fontColor(item===this.searchText?$r('app.color.color_ED2800'):$r('app.color.color_000000'))
-                      .fontSize('31lpx')
-                      .fontWeight('400lpx')
-                      .lineHeight('50lpx')
+                      .fontSize(`${this.calcHeight(31)}lpx`)
+                      .fontWeight(400)
+                      .lineHeight(`${this.calcHeight(50)}lpx`)
                   })
                 }
                   .maxLines(1)
@@ -40,14 +41,14 @@ export struct SearchRelatedComponent {
 
               }.alignItems(VerticalAlign.Center)
               .justifyContent(FlexAlign.Start)
-              .height('95lpx')
+              .height(`${this.calcHeight(95)}lpx`)
 
               if (index != this.relatedSearchContentData.length - 1) {
                 Divider()
                   .width('100%')
-                  .height('1lpx')
+                  .height(`${this.calcHeight(1)}lpx`)
                   .color($r('app.color.color_F5F5F5'))
-                  .strokeWidth('1lpx')
+                  .strokeWidth(`${this.calcHeight(1)}lpx`)
               }
             }
           }.width('100%')
@@ -59,8 +60,11 @@ export struct SearchRelatedComponent {
         })
       }.width('100%')
     }.width('100%')
-    .margin({ top: '8lpx' })
-    .padding({ left: '31lpx', right: '31lpx' })
+    .margin({ top: `${this.calcHeight(8)}lpx` })
+    .padding({ left: `${this.calcHeight(31)}lpx`, right: `${this.calcHeight(31)}lpx` })
   }
 
+  calcHeight(value:number): number{
+    return value * this.percent
+  }
 }
\ No newline at end of file

@@ -28,6 +28,7 @@ export struct SearchResultComponent {
   scroller: Scroller = new Scroller()
   onClickTryAgain?: () => void;
   @State isConnectNetwork : boolean = NetworkUtil.isNetConnected()
+  @Prop percent:number = 1
 
   aboutToAppear(): void {
     if (this.count.length === 0 && this.isGetRequest == true) {
@@ -71,7 +72,7 @@ export struct SearchResultComponent {
             //缺省图
             if(this.isConnectNetwork){
               EmptyComponent({emptyType:4})
-                .height('612lpx')
+                .height(`${this.calcHeight(612)}lpx`)
                 .width('100%')
             }else{
               EmptyComponent({ emptyType: 1,emptyHeight:"100%" ,retry: () => {
@@ -90,19 +91,19 @@ export struct SearchResultComponent {
             ListItem() {
               Row() {
                 Image($r('app.media.search_suggest_icon'))
-                  .width('6lpx')
-                  .height('31lpx')
+                  .width(`${this.calcHeight(6)}lpx`)
+                  .height(`${this.calcHeight(31)}lpx`)
                   .objectFit(ImageFit.Cover)
                   .interpolation(ImageInterpolation.High)
-                  .margin({ right: '10lpx' })
+                  .margin({ right: `${this.calcHeight(10)}lpx` })
                 Text("为你推荐")
                   .textAlign(TextAlign.Start)
                   .fontWeight(600)
-                  .fontSize('33lpx')
-                  .lineHeight('46lpx')
+                  .fontSize(`${this.calcHeight(33)}lpx`)
+                  .lineHeight(`${this.calcHeight(46)}lpx`)
                   .fontColor($r('app.color.color_222222'))
-              }.height('84lpx')
-              .padding({ left: '31lpx', right: '31lpx' })
+              }.height(`${this.calcHeight(84)}lpx`)
+              .padding({ left: `${this.calcHeight(31)}lpx`, right: `${this.calcHeight(31)}lpx` })
               .width('100%')
               .alignItems(VerticalAlign.Center)
             }
@@ -115,9 +116,9 @@ export struct SearchResultComponent {
                 if (index != this.data.totalCount() - 1) {
                   Divider()
                     .width('100%')
-                    .height('1lpx')
+                    .height(`${this.calcHeight(1)}lpx`)
                     .color($r('app.color.color_F5F5F5'))
-                    .strokeWidth('1lpx')
+                    .strokeWidth(`${this.calcHeight(1)}lpx`)
                 }
               }
             }
@@ -144,7 +145,7 @@ export struct SearchResultComponent {
         .vertical(false)
         .barMode(BarMode.Fixed)
         .barWidth('100%')
-        .barHeight('84lpx')
+        .barHeight(`${this.calcHeight(84)}lpx`)
         .animationDuration(0)
         .width('100%')
         .scrollable(false)
@@ -152,26 +153,26 @@ export struct SearchResultComponent {
       }
     }.width('100%')
     .layoutWeight(1)
-    .margin({ top: '12lpx' })
+    .margin({ top: `${this.calcHeight(12)}lpx` })
   }
 
   @Builder
   TabBuilder(index: number, item: string) {
     Stack() {
       Text(item)
-        .height('38lpx')
-        .fontSize('33lpx')
+        .height(`${this.calcHeight(38)}lpx`)
+        .fontSize(`${this.calcHeight(33)}lpx`)
         .fontWeight(this.currentIndex === index ? 600 : 400)
         .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
-        .lineHeight('38lpx')
+        .lineHeight(`${this.calcHeight(38)}lpx`)
 
       if (this.currentIndex === index) {
         Divider()
-          .width('31lpx')
-          .height('4lpx')
+          .width(`${this.calcHeight(31)}lpx`)
+          .height(`${this.calcHeight(4)}lpx`)
           .color('#ED2800')
-          .strokeWidth('4lpx')
-          .margin({ top: '50lpx' })
+          .strokeWidth(`${this.calcHeight(4)}lpx`)
+          .margin({ top: `${this.calcHeight(50)}lpx` })
           .id("divTag")
       }
     }.onClick(() => {
@@ -179,7 +180,11 @@ export struct SearchResultComponent {
       this.controller.changeIndex(this.currentIndex)
     })
     .height('100%')
-    .margin({ right: '9lpx' })
-    .padding({ left: '31lpx', right: index === this.count.length - 1 ? "31lpx" : "0lpx" })
+    .margin({ right: `${this.calcHeight(9)}lpx` })
+    .padding({ left: `${this.calcHeight(31)}lpx`, right: index === this.count.length - 1 ? `${this.calcHeight(31)}lpx` : "0lpx" })
+  }
+
+  calcHeight(value:number): number{
+    return value * this.percent
   }
 }
\ No newline at end of file