desc：热门搜索适配折叠屏

yangchenggong1_wd
Commit df92bfbb8fa424b820fa4d9792b0ec62e5917e0f df92bfbb 1 parent 0633ea2e
Showing 2 changed files with 75 additions and 47 deletions
sight_harmony/features/wdComponent/src/main/ets/components/search/SearchComponent.ets
sight_harmony/features/wdComponent/src/main/ets/components/search/SearchHotsComponent.ets
--- a/sight_harmony/features/wdComponent/src/main/ets/components/search/SearchComponent.ets
View file @df92bfb
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/search/SearchComponent.ets
View file @df92bfb
 import router from '@ohos.router'
-import { NetworkUtil, StringUtils, ToastUtils } from 'wdKit'
+import { BreakpointSystem, NetworkUtil, StringUtils, ToastUtils } from 'wdKit'
 import { ParamType, TrackConstants, Tracking } from 'wdTracking/Index'
 import SearcherAboutDataModel from '../../model/SearcherAboutDataModel'
 import { SearchHistoryItem } from '../../viewmodel/SearchHistoryItem'
 import { SearchRelatedItem } from '../../viewmodel/SearchRelatedItem'
-import { EmptyComponent } from '../view/EmptyComponent'
 import { SearchHistoryComponent } from './SearchHistoryComponent'
 import { SearchHotsComponent } from './SearchHotsComponent'
 import { SearchRelatedComponent } from './SearchRelatedComponent'
@@ -34,7 +33,22 @@ export struct SearchComponent {
   @State isGetRequest:boolean = false
   @Link fromTabName: string
+  @StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm';
+  private breakpointSystem = new BreakpointSystem();
+  @State percent:number = 1
+
+  currentChanged(){
+    if(this.currentBreakpoint == "md" || this.currentBreakpoint == "lg"){
+      this.percent = 0.7
+    }else {
+      this.percent = 1
+    }
+  }
+
+
   aboutToAppear() {
+    this.breakpointSystem.register();
+    this.currentChanged()
     //获取提示滚动
     this.getSearchHint()
     //清除缓存
@@ -49,6 +63,11 @@ export struct SearchComponent {
     }, 1000);
   }
+  aboutToDisappear(): void {
+    this.breakpointSystem.unregister();
+  }
+
+
   getRelatedSearchContent() {
     if(StringUtils.isNotEmpty(this.searchText)){
       SearcherAboutDataModel.getRelatedSearchContentData(encodeURI(this.searchText),getContext(this)).then((value) => {
@@ -134,19 +153,19 @@ export struct SearchComponent {
               //分隔符
               Divider()
                 .width('100%')
-                .height('1lpx')
+                .height(`${this.calcHeight(1)}lpx`)
                 .color($r('app.color.color_EDEDED'))
-                .strokeWidth('1lpx')
+                .strokeWidth(`${this.calcHeight(1)}lpx`)
             }
-            SearchHotsComponent({onGetSearchRes: (item): void => this.getSearchHotResData(item)})
+            SearchHotsComponent({onGetSearchRes: (item): void => this.getSearchHotResData(item),percent:this.percent})
           }
         }
         .scrollable(ScrollDirection.Vertical)
         .scrollBar(BarState.Off)
         .width('100%')
         .height('100%')
-        .padding({ left: '31lpx', right: '31lpx' })
+        .padding({ left: `${this.calcHeight(31)}lpx`, right: `${this.calcHeight(31)}lpx` })
       } else {
         if (this.hasChooseSearch) {
           //搜索结果
@@ -244,14 +263,14 @@ export struct SearchComponent {
           Swiper(this.swiperController) {
             ForEach(this.searchTextData, (item: string, index: number) => {
               Text(item)
-                .fontWeight('400lpx')
-                .fontSize('25lpx')
+                .fontWeight(400)
+                .fontSize(`${this.calcHeight(25)}lpx`)
                 .fontColor($r('app.color.color_666666'))
-                .lineHeight('35lpx')
+                .lineHeight(`${this.calcHeight(35)}lpx`)
                 .textAlign(TextAlign.Start)
                 .maxLines(1)
                 .textOverflow({ overflow: TextOverflow.Clip })
-                .margin({ left: '40lpx' })
+                .margin({ left: `${this.calcHeight(40)}lpx` })
             })
           }
           .loop(true)
@@ -268,9 +287,9 @@ export struct SearchComponent {
         Row(){
           Search({ value: this.searchText, placeholder: '', controller: this.controller})
             .layoutWeight(1)
-            .height('69lpx')
+            .height(`${this.calcHeight(69)}lpx`)
             .backgroundColor($r('app.color.color_transparent'))
-            .textFont({ size: "27lpx", weight: "400lpx" })
+            .textFont({ size: `${this.calcHeight(27)}lpx`, weight: 400 })
             // .defaultFocus(true)
             .id("searchId")
             .searchIcon({
@@ -318,15 +337,15 @@ export struct SearchComponent {
                 }
               }
             })
-        }.padding({right:'70lpx'})
+        }.padding({right:`${this.calcHeight(70)}lpx`})
         .layoutWeight(1)
         Image($r('app.media.search_input_del_icon'))
-          .width("31lpx")
-          .height("31lpx")
+          .width(`${this.calcHeight(31)}lpx`)
+          .height(`${this.calcHeight(31)}lpx`)
           .objectFit(ImageFit.Auto)
           .interpolation(ImageInterpolation.Medium)
-          .margin({left:"495lpx"})
+          .margin({left:`${this.calcHeight(495)}lpx`})
           .onClick(()=>{
             this.searchText = ""
           })
@@ -336,24 +355,24 @@ export struct SearchComponent {
       .backgroundImage($r('app.media.search_page_input_bg'))
       .backgroundImageSize(ImageSize.Cover)
       .layoutWeight(1)
-      .height('69lpx')
+      .height(`${this.calcHeight(69)}lpx`)
       //TODO 需要修改输入法  换行
       //右
       Text("取消")
         .textAlign(TextAlign.Center)
-        .fontWeight('400lpx')
-        .fontSize('31lpx')
-        .lineHeight('58lpx')
+        .fontWeight(400)
+        .fontSize(`${this.calcHeight(31)}lpx`)
+        .lineHeight(`${this.calcHeight(58)}lpx`)
         .fontColor($r('app.color.color_222222'))
-        .width('125lpx')
-        .height('58lpx')
+        .width(`${this.calcHeight(125)}lpx`)
+        .height(`${this.calcHeight(58)}lpx`)
         .onClick(() => {
           router.back()
         })
     }
-    .height('85lpx')
-    .padding({ left: '31lpx' })
+    .height(`${this.calcHeight(85)}lpx`)
+    .padding({ left: `${this.calcHeight(31)}lpx` })
     .alignItems(VerticalAlign.Center)
   }
@@ -395,6 +414,10 @@ export struct SearchComponent {
     this.isClickedInputSearch = false
     this.isClickedHintSearch = false
   }
+
+  calcHeight(value:number): number{
+    return value * this.percent
+  }
 }
 function trackSearchClick(upOneLevelPageName: string,keyword:string){
--- a/sight_harmony/features/wdComponent/src/main/ets/components/search/SearchHotsComponent.ets
View file @df92bfb
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/search/SearchHotsComponent.ets
View file @df92bfb
@@ -10,6 +10,7 @@ const TAG = "SearchHotsComponent"
 export struct SearchHotsComponent{
   @State searchHotsData:SearchHotContentItem[] = []
   onGetSearchRes?: (item:string) => void;
+  @Prop percent:number = 1
   aboutToAppear(){
     //获取搜索热词
@@ -34,22 +35,22 @@ export struct SearchHotsComponent{
       if(this.searchHotsData.length>0){
         Row() {
           Image($r('app.media.search_hot_icon'))
-            .width('46lpx')
-            .height('46lpx')
+            .width(`${this.calcHeight(46)}lpx`)
+            .height(`${this.calcHeight(46)}lpx`)
             .objectFit(ImageFit.Auto)
-            .margin({right:'8lpx'})
+            .margin({right:`${this.calcHeight(8)}lpx`})
             .interpolation(ImageInterpolation.Medium)
           Text("热门搜索")
             .textAlign(TextAlign.Center)
             .fontWeight(FontWeight.Bold)
-            .fontSize('33lpx')
-            .lineHeight('46lpx')
+            .fontSize(`${this.calcHeight(33)}lpx`)
+            .lineHeight(`${this.calcHeight(46)}lpx`)
             .fontColor($r('app.color.color_222222'))
-            .height('46lpx')
+            .height(`${this.calcHeight(46)}lpx`)
         }
         .width('100%')
-        .margin({bottom:"15lpx"})
+        .margin({bottom:`${this.calcHeight(15)}lpx`})
       }
       List(){
@@ -60,49 +61,49 @@ export struct SearchHotsComponent{
                   Row(){
                     if(item.sequence <=3){
                       Image(item.sequence===1?$r('app.media.search_hot_num1'):item.sequence===2?$r('app.media.search_hot_num2'):$r('app.media.search_hot_num3'))
-                        .width('27lpx')
-                        .height('35lpx')
+                        .width(`${this.calcHeight(27)}lpx`)
+                        .height(`${this.calcHeight(35)}lpx`)
                         .objectFit(ImageFit.Auto)
-                        .margin({right:'12lpx'})
+                        .margin({right:`${this.calcHeight(12)}lpx`})
                         .interpolation(ImageInterpolation.High)
                     }else {
                       Text(`${item.sequence}`)
-                        .height('31lpx')
+                        .height(`${this.calcHeight(31)}lpx`)
                         .fontColor($r('app.color.color_666666'))
-                        .fontSize('27lpx')
+                        .fontSize(`${this.calcHeight(27)}lpx`)
                         .fontWeight(FontWeight.Regular)
-                        .lineHeight('31lpx')
-                        .margin({right:'12lpx'})
+                        .lineHeight(`${this.calcHeight(31)}lpx`)
+                        .margin({right:`${this.calcHeight(12)}lpx`})
                     }
                     Text(`${item.hotEntry}`)
                       .textOverflow({ overflow: TextOverflow.Ellipsis })
                       .fontColor($r('app.color.color_222222'))
-                      .fontSize('31lpx')
+                      .fontSize(`${this.calcHeight(31)}lpx`)
                       .maxLines(1)
                       .fontWeight(FontWeight.Regular)
-                      .lineHeight('42lpx')
+                      .lineHeight(`${this.calcHeight(42)}lpx`)
                   }.layoutWeight(1)
                   if(item.mark===1 || item.mark===2){
                     Image(item.mark===1?$r('app.media.search_hots_mark1'):$r('app.media.search_hots_mark2'))
-                      .width('42lpx')
-                      .height('31lpx')
+                      .width(`${this.calcHeight(42)}lpx`)
+                      .height(`${this.calcHeight(31)}lpx`)
                       .objectFit(ImageFit.Auto)
                       .interpolation(ImageInterpolation.High)
                   }
                 }.alignItems(VerticalAlign.Center)
-                .height('84lpx')
+                .height(`${this.calcHeight(84)}lpx`)
                 .width('100%')
                 .justifyContent(FlexAlign.SpaceBetween)
                 if(index != this.searchHotsData.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`)
                 }
-              }.height('85lpx')
+              }.height(`${this.calcHeight(85)}lpx`)
               .width('100%')
               .alignItems(HorizontalAlign.Start)
           }
@@ -117,6 +118,10 @@ export struct SearchHotsComponent{
       }).layoutWeight(1)
     }.width('100%')
     .height('100%')
-    .margin({top:'46lpx'})
+    .margin({top:`${this.calcHeight(46)}lpx`})
+  }
+
+  calcHeight(value:number): number{
+    return value * this.percent
   }
 }