developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
yangchenggong1_wd
eb48dad0 1 parent a11f03b0

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

Inline Side-by-side
Showing 4 changed files with 84 additions and 68 deletions
@@ -146,7 +146,7 @@ export struct SearchComponent { @@ -146,7 +146,7 @@ export struct SearchComponent {
146 Scroll(this.scroller) { 146 Scroll(this.scroller) {
147 Column() { 147 Column() {
148 if(this.searchHistoryData!=null && this.searchHistoryData.length>0){ 148 if(this.searchHistoryData!=null && this.searchHistoryData.length>0){
149 - SearchHistoryComponent({ searchHistoryData: $searchHistoryData, onDelHistory: (): void => this.getSearchHistoryData(),onGetSearchRes: (item,index): void => this.getSearchHistoryResData(item,index),onCloseInput : (): void => this.stopInput() }) 149 + SearchHistoryComponent({ searchHistoryData: $searchHistoryData, onDelHistory: (): void => this.getSearchHistoryData(),onGetSearchRes: (item,index): void => this.getSearchHistoryResData(item,index),onCloseInput : (): void => this.stopInput(),percent:this.percent })
150 } 150 }
151 151
152 if(this.searchHistoryData.length>0){ 152 if(this.searchHistoryData.length>0){
@@ -175,10 +175,10 @@ export struct SearchComponent { @@ -175,10 +175,10 @@ export struct SearchComponent {
175 this.getSearchHistoryData() 175 this.getSearchHistoryData()
176 this.getSearchInputResData(this.searchText) 176 this.getSearchInputResData(this.searchText)
177 } 177 }
178 - }}) 178 + },percent:this.percent})
179 } else { 179 } else {
180 //联想搜索 180 //联想搜索
181 - SearchRelatedComponent({relatedSearchContentData:$relatedSearchContentsData,onGetSearchRes: (item): void => this.getSearchRelatedResData(item),searchText:this.searchText}) 181 + SearchRelatedComponent({relatedSearchContentData:$relatedSearchContentsData,onGetSearchRes: (item): void => this.getSearchRelatedResData(item),searchText:this.searchText,percent:this.percent})
182 } 182 }
183 } 183 }
184 }.height('100%') 184 }.height('100%')
@@ -337,20 +337,22 @@ export struct SearchComponent { @@ -337,20 +337,22 @@ export struct SearchComponent {
337 } 337 }
338 } 338 }
339 }) 339 })
340 - }.padding({right:`${this.calcHeight(70)}lpx`})  
341 - .layoutWeight(1)  
342 340
343 - Image($r('app.media.search_input_del_icon'))  
344 - .width(`${this.calcHeight(31)}lpx`)  
345 - .height(`${this.calcHeight(31)}lpx`)  
346 - .objectFit(ImageFit.Auto)  
347 - .interpolation(ImageInterpolation.Medium)  
348 - .margin({left:`${this.calcHeight(495)}lpx`})  
349 - .onClick(()=>{  
350 - this.searchText = ""  
351 - })  
352 - .visibility(StringUtils.isEmpty(this.searchText) ? Visibility.Hidden : Visibility.Visible) 341 + Image($r('app.media.search_input_del_icon'))
  342 + .width(`${this.calcHeight(31)}lpx`)
  343 + .height(`${this.calcHeight(31)}lpx`)
  344 + .objectFit(ImageFit.Auto)
  345 + .interpolation(ImageInterpolation.Medium)
  346 + .onClick(()=>{
  347 + this.searchText = ""
  348 + })
  349 + .offset({x:10})
  350 + .enabled(true)
  351 + .visibility(StringUtils.isEmpty(this.searchText) ? Visibility.Hidden : Visibility.Visible)
353 352
  353 + }.padding({right:`${this.calcHeight(70)}lpx`})
  354 + .layoutWeight(1)
  355 + .justifyContent(FlexAlign.SpaceBetween)
354 } 356 }
355 .backgroundImage($r('app.media.search_page_input_bg')) 357 .backgroundImage($r('app.media.search_page_input_bg'))
356 .backgroundImageSize(ImageSize.Cover) 358 .backgroundImageSize(ImageSize.Cover)
@@ -27,6 +27,7 @@ export struct SearchHistoryComponent{ @@ -27,6 +27,7 @@ export struct SearchHistoryComponent{
27 alignment: DialogAlignment.Center, 27 alignment: DialogAlignment.Center,
28 customStyle: true 28 customStyle: true
29 }) 29 })
  30 + @Prop percent:number = 1
30 31
31 onAccept(){ 32 onAccept(){
32 console.info('Callback when the second button is clicked') 33 console.info('Callback when the second button is clicked')
@@ -48,14 +49,14 @@ export struct SearchHistoryComponent{ @@ -48,14 +49,14 @@ export struct SearchHistoryComponent{
48 Text("搜索历史") 49 Text("搜索历史")
49 .textAlign(TextAlign.Center) 50 .textAlign(TextAlign.Center)
50 .fontWeight(FontWeight.Regular) 51 .fontWeight(FontWeight.Regular)
51 - .fontSize('27lpx')  
52 - .lineHeight('38lpx') 52 + .fontSize(`${this.calcHeight(27)}lpx`)
  53 + .lineHeight(`${this.calcHeight(38)}lpx`)
53 .fontColor($r('app.color.color_999999')) 54 .fontColor($r('app.color.color_999999'))
54 - .height('38lpx') 55 + .height(`${this.calcHeight(38)}lpx`)
55 56
56 Image($r('app.media.search_delete_icon')) 57 Image($r('app.media.search_delete_icon'))
57 - .height('31lpx')  
58 - .width('31lpx') 58 + .height(`${this.calcHeight(31)}lpx`)
  59 + .width(`${this.calcHeight(31)}lpx`)
59 .interpolation(ImageInterpolation.High) 60 .interpolation(ImageInterpolation.High)
60 .objectFit(ImageFit.Auto) 61 .objectFit(ImageFit.Auto)
61 .onClick(()=>{ 62 .onClick(()=>{
@@ -63,7 +64,7 @@ export struct SearchHistoryComponent{ @@ -63,7 +64,7 @@ export struct SearchHistoryComponent{
63 this.dialogController.open() 64 this.dialogController.open()
64 }) 65 })
65 }.justifyContent(FlexAlign.SpaceBetween) 66 }.justifyContent(FlexAlign.SpaceBetween)
66 - .margin({bottom:'17lpx'}) 67 + .margin({bottom:`${this.calcHeight(17)}lpx`})
67 .width('100%') 68 .width('100%')
68 69
69 Grid(){ 70 Grid(){
@@ -72,14 +73,14 @@ export struct SearchHistoryComponent{ @@ -72,14 +73,14 @@ export struct SearchHistoryComponent{
72 Row(){ 73 Row(){
73 Text(`${item.searchContent}`) 74 Text(`${item.searchContent}`)
74 .fontColor($r('app.color.color_222222')) 75 .fontColor($r('app.color.color_222222'))
75 - .fontSize('31lpx') 76 + .fontSize(`${this.calcHeight(31)}lpx`)
76 .fontWeight(FontWeight.Regular) 77 .fontWeight(FontWeight.Regular)
77 - .lineHeight('46lpx') 78 + .lineHeight(`${this.calcHeight(46)}lpx`)
78 .maxLines(1) 79 .maxLines(1)
79 - .constraintSize({maxWidth:index%2 === 0?'270lpx':'230lpx'}) 80 + .constraintSize({maxWidth:index%2 === 0?`${this.calcHeight(270)}lpx`:`${this.calcHeight(230)}lpx`})
80 .textOverflow({ overflow: TextOverflow.Ellipsis }) 81 .textOverflow({ overflow: TextOverflow.Ellipsis })
81 .textAlign(TextAlign.Start) 82 .textAlign(TextAlign.Start)
82 - .margin({left:index%2 === 0?'0lpx':'23lpx'}) 83 + .margin({left:index%2 === 0?'0lpx':`${this.calcHeight(23)}lpx`})
83 .onClick(()=>{ 84 .onClick(()=>{
84 if (this.onGetSearchRes !== undefined) { 85 if (this.onGetSearchRes !== undefined) {
85 this.onGetSearchRes(item.searchContent,index) 86 this.onGetSearchRes(item.searchContent,index)
@@ -87,9 +88,9 @@ export struct SearchHistoryComponent{ @@ -87,9 +88,9 @@ export struct SearchHistoryComponent{
87 }) 88 })
88 89
89 Image($r('app.media.search_item_delete_icon')) 90 Image($r('app.media.search_item_delete_icon'))
90 - .width('23lpx')  
91 - .height('23lpx')  
92 - .margin({left:'4lpx'}) 91 + .width(`${this.calcHeight(23)}lpx`)
  92 + .height(`${this.calcHeight(23)}lpx`)
  93 + .margin({left:`${this.calcHeight(4)}lpx`})
93 .interpolation(ImageInterpolation.Medium) 94 .interpolation(ImageInterpolation.Medium)
94 .objectFit(ImageFit.Auto) 95 .objectFit(ImageFit.Auto)
95 .onClick(()=>{ 96 .onClick(()=>{
@@ -103,19 +104,19 @@ export struct SearchHistoryComponent{ @@ -103,19 +104,19 @@ export struct SearchHistoryComponent{
103 104
104 if(index%2 === 0 && index != this.searchHistoryData.length-1 ){ 105 if(index%2 === 0 && index != this.searchHistoryData.length-1 ){
105 Divider() 106 Divider()
106 - .width('2lpx')  
107 - .height('23lpx') 107 + .width(`${this.calcHeight(2)}lpx`)
  108 + .height(`${this.calcHeight(23)}lpx`)
108 .color($r('app.color.color_CCCCCC')) 109 .color($r('app.color.color_CCCCCC'))
109 - .strokeWidth('2lpx') 110 + .strokeWidth(`${this.calcHeight(2)}lpx`)
110 .vertical(true) 111 .vertical(true)
111 } 112 }
112 }.height('100%') 113 }.height('100%')
113 .alignItems(VerticalAlign.Center) 114 .alignItems(VerticalAlign.Center)
114 .width('100%') 115 .width('100%')
115 - .margin({left:index%2 === 1?'23lpx':'0lpx'}) 116 + .margin({left:index%2 === 1?`${this.calcHeight(23)}lpx`:'0lpx'})
116 117
117 } 118 }
118 - .height('46lpx') 119 + .height(`${this.calcHeight(46)}lpx`)
119 .alignSelf(ItemAlign.Center) 120 .alignSelf(ItemAlign.Center)
120 121
121 }) 122 })
@@ -123,9 +124,9 @@ export struct SearchHistoryComponent{ @@ -123,9 +124,9 @@ export struct SearchHistoryComponent{
123 .height(this.getCategoryViewHeight()) 124 .height(this.getCategoryViewHeight())
124 .rowsTemplate(this.getCategoryRowTmpl()) 125 .rowsTemplate(this.getCategoryRowTmpl())
125 .columnsTemplate('1fr 1fr') 126 .columnsTemplate('1fr 1fr')
126 - .rowsGap('23lpx') 127 + .rowsGap(`${this.calcHeight(23)}lpx`)
127 } 128 }
128 - .margin({top:"36lpx",bottom:'46lpx'}) 129 + .margin({top:`${this.calcHeight(36)}lpx`,bottom:`${this.calcHeight(46)}lpx`})
129 } 130 }
130 131
131 getCategoryRowCount() { 132 getCategoryRowCount() {
@@ -140,6 +141,10 @@ export struct SearchHistoryComponent{ @@ -140,6 +141,10 @@ export struct SearchHistoryComponent{
140 } 141 }
141 142
142 getCategoryViewHeight() { 143 getCategoryViewHeight() {
143 - return `${50 * this.getCategoryRowCount()}lpx`; 144 + return `${50 * this.percent * this.getCategoryRowCount()}lpx`;
  145 + }
  146 +
  147 + calcHeight(value:number): number{
  148 + return value * this.percent
144 } 149 }
145 } 150 }
@@ -10,6 +10,7 @@ export struct SearchRelatedComponent { @@ -10,6 +10,7 @@ export struct SearchRelatedComponent {
10 @Link relatedSearchContentData: SearchRelatedItem[] 10 @Link relatedSearchContentData: SearchRelatedItem[]
11 onGetSearchRes?: (item:string) => void; 11 onGetSearchRes?: (item:string) => void;
12 @Prop searchText: string 12 @Prop searchText: string
  13 + @Prop percent:number = 1
13 14
14 build() { 15 build() {
15 Column() { 16 Column() {
@@ -19,19 +20,19 @@ export struct SearchRelatedComponent { @@ -19,19 +20,19 @@ export struct SearchRelatedComponent {
19 Column(){ 20 Column(){
20 Row() { 21 Row() {
21 Image($r('app.media.search_related_item_icon')) 22 Image($r('app.media.search_related_item_icon'))
22 - .width('31lpx')  
23 - .height('31lpx') 23 + .width(`${this.calcHeight(31)}lpx`)
  24 + .height(`${this.calcHeight(31)}lpx`)
24 .objectFit(ImageFit.Auto) 25 .objectFit(ImageFit.Auto)
25 - .margin({ right: '10lpx' }) 26 + .margin({ right:`${this.calcHeight(10)}lpx` })
26 .interpolation(ImageInterpolation.High) 27 .interpolation(ImageInterpolation.High)
27 28
28 Text(){ 29 Text(){
29 ForEach(item.data_arr,(item:string)=>{ 30 ForEach(item.data_arr,(item:string)=>{
30 Span(item) 31 Span(item)
31 .fontColor(item===this.searchText?$r('app.color.color_ED2800'):$r('app.color.color_000000')) 32 .fontColor(item===this.searchText?$r('app.color.color_ED2800'):$r('app.color.color_000000'))
32 - .fontSize('31lpx')  
33 - .fontWeight('400lpx')  
34 - .lineHeight('50lpx') 33 + .fontSize(`${this.calcHeight(31)}lpx`)
  34 + .fontWeight(400)
  35 + .lineHeight(`${this.calcHeight(50)}lpx`)
35 }) 36 })
36 } 37 }
37 .maxLines(1) 38 .maxLines(1)
@@ -40,14 +41,14 @@ export struct SearchRelatedComponent { @@ -40,14 +41,14 @@ export struct SearchRelatedComponent {
40 41
41 }.alignItems(VerticalAlign.Center) 42 }.alignItems(VerticalAlign.Center)
42 .justifyContent(FlexAlign.Start) 43 .justifyContent(FlexAlign.Start)
43 - .height('95lpx') 44 + .height(`${this.calcHeight(95)}lpx`)
44 45
45 if (index != this.relatedSearchContentData.length - 1) { 46 if (index != this.relatedSearchContentData.length - 1) {
46 Divider() 47 Divider()
47 .width('100%') 48 .width('100%')
48 - .height('1lpx') 49 + .height(`${this.calcHeight(1)}lpx`)
49 .color($r('app.color.color_F5F5F5')) 50 .color($r('app.color.color_F5F5F5'))
50 - .strokeWidth('1lpx') 51 + .strokeWidth(`${this.calcHeight(1)}lpx`)
51 } 52 }
52 } 53 }
53 }.width('100%') 54 }.width('100%')
@@ -59,8 +60,11 @@ export struct SearchRelatedComponent { @@ -59,8 +60,11 @@ export struct SearchRelatedComponent {
59 }) 60 })
60 }.width('100%') 61 }.width('100%')
61 }.width('100%') 62 }.width('100%')
62 - .margin({ top: '8lpx' })  
63 - .padding({ left: '31lpx', right: '31lpx' }) 63 + .margin({ top: `${this.calcHeight(8)}lpx` })
  64 + .padding({ left: `${this.calcHeight(31)}lpx`, right: `${this.calcHeight(31)}lpx` })
64 } 65 }
65 66
  67 + calcHeight(value:number): number{
  68 + return value * this.percent
  69 + }
66 } 70 }
@@ -28,6 +28,7 @@ export struct SearchResultComponent { @@ -28,6 +28,7 @@ export struct SearchResultComponent {
28 scroller: Scroller = new Scroller() 28 scroller: Scroller = new Scroller()
29 onClickTryAgain?: () => void; 29 onClickTryAgain?: () => void;
30 @State isConnectNetwork : boolean = NetworkUtil.isNetConnected() 30 @State isConnectNetwork : boolean = NetworkUtil.isNetConnected()
  31 + @Prop percent:number = 1
31 32
32 aboutToAppear(): void { 33 aboutToAppear(): void {
33 if (this.count.length === 0 && this.isGetRequest == true) { 34 if (this.count.length === 0 && this.isGetRequest == true) {
@@ -71,7 +72,7 @@ export struct SearchResultComponent { @@ -71,7 +72,7 @@ export struct SearchResultComponent {
71 //缺省图 72 //缺省图
72 if(this.isConnectNetwork){ 73 if(this.isConnectNetwork){
73 EmptyComponent({emptyType:4}) 74 EmptyComponent({emptyType:4})
74 - .height('612lpx') 75 + .height(`${this.calcHeight(612)}lpx`)
75 .width('100%') 76 .width('100%')
76 }else{ 77 }else{
77 EmptyComponent({ emptyType: 1,emptyHeight:"100%" ,retry: () => { 78 EmptyComponent({ emptyType: 1,emptyHeight:"100%" ,retry: () => {
@@ -90,19 +91,19 @@ export struct SearchResultComponent { @@ -90,19 +91,19 @@ export struct SearchResultComponent {
90 ListItem() { 91 ListItem() {
91 Row() { 92 Row() {
92 Image($r('app.media.search_suggest_icon')) 93 Image($r('app.media.search_suggest_icon'))
93 - .width('6lpx')  
94 - .height('31lpx') 94 + .width(`${this.calcHeight(6)}lpx`)
  95 + .height(`${this.calcHeight(31)}lpx`)
95 .objectFit(ImageFit.Cover) 96 .objectFit(ImageFit.Cover)
96 .interpolation(ImageInterpolation.High) 97 .interpolation(ImageInterpolation.High)
97 - .margin({ right: '10lpx' }) 98 + .margin({ right: `${this.calcHeight(10)}lpx` })
98 Text("为你推荐") 99 Text("为你推荐")
99 .textAlign(TextAlign.Start) 100 .textAlign(TextAlign.Start)
100 .fontWeight(600) 101 .fontWeight(600)
101 - .fontSize('33lpx')  
102 - .lineHeight('46lpx') 102 + .fontSize(`${this.calcHeight(33)}lpx`)
  103 + .lineHeight(`${this.calcHeight(46)}lpx`)
103 .fontColor($r('app.color.color_222222')) 104 .fontColor($r('app.color.color_222222'))
104 - }.height('84lpx')  
105 - .padding({ left: '31lpx', right: '31lpx' }) 105 + }.height(`${this.calcHeight(84)}lpx`)
  106 + .padding({ left: `${this.calcHeight(31)}lpx`, right: `${this.calcHeight(31)}lpx` })
106 .width('100%') 107 .width('100%')
107 .alignItems(VerticalAlign.Center) 108 .alignItems(VerticalAlign.Center)
108 } 109 }
@@ -115,9 +116,9 @@ export struct SearchResultComponent { @@ -115,9 +116,9 @@ export struct SearchResultComponent {
115 if (index != this.data.totalCount() - 1) { 116 if (index != this.data.totalCount() - 1) {
116 Divider() 117 Divider()
117 .width('100%') 118 .width('100%')
118 - .height('1lpx') 119 + .height(`${this.calcHeight(1)}lpx`)
119 .color($r('app.color.color_F5F5F5')) 120 .color($r('app.color.color_F5F5F5'))
120 - .strokeWidth('1lpx') 121 + .strokeWidth(`${this.calcHeight(1)}lpx`)
121 } 122 }
122 } 123 }
123 } 124 }
@@ -144,7 +145,7 @@ export struct SearchResultComponent { @@ -144,7 +145,7 @@ export struct SearchResultComponent {
144 .vertical(false) 145 .vertical(false)
145 .barMode(BarMode.Fixed) 146 .barMode(BarMode.Fixed)
146 .barWidth('100%') 147 .barWidth('100%')
147 - .barHeight('84lpx') 148 + .barHeight(`${this.calcHeight(84)}lpx`)
148 .animationDuration(0) 149 .animationDuration(0)
149 .width('100%') 150 .width('100%')
150 .scrollable(false) 151 .scrollable(false)
@@ -152,26 +153,26 @@ export struct SearchResultComponent { @@ -152,26 +153,26 @@ export struct SearchResultComponent {
152 } 153 }
153 }.width('100%') 154 }.width('100%')
154 .layoutWeight(1) 155 .layoutWeight(1)
155 - .margin({ top: '12lpx' }) 156 + .margin({ top: `${this.calcHeight(12)}lpx` })
156 } 157 }
157 158
158 @Builder 159 @Builder
159 TabBuilder(index: number, item: string) { 160 TabBuilder(index: number, item: string) {
160 Stack() { 161 Stack() {
161 Text(item) 162 Text(item)
162 - .height('38lpx')  
163 - .fontSize('33lpx') 163 + .height(`${this.calcHeight(38)}lpx`)
  164 + .fontSize(`${this.calcHeight(33)}lpx`)
164 .fontWeight(this.currentIndex === index ? 600 : 400) 165 .fontWeight(this.currentIndex === index ? 600 : 400)
165 .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor) 166 .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
166 - .lineHeight('38lpx') 167 + .lineHeight(`${this.calcHeight(38)}lpx`)
167 168
168 if (this.currentIndex === index) { 169 if (this.currentIndex === index) {
169 Divider() 170 Divider()
170 - .width('31lpx')  
171 - .height('4lpx') 171 + .width(`${this.calcHeight(31)}lpx`)
  172 + .height(`${this.calcHeight(4)}lpx`)
172 .color('#ED2800') 173 .color('#ED2800')
173 - .strokeWidth('4lpx')  
174 - .margin({ top: '50lpx' }) 174 + .strokeWidth(`${this.calcHeight(4)}lpx`)
  175 + .margin({ top: `${this.calcHeight(50)}lpx` })
175 .id("divTag") 176 .id("divTag")
176 } 177 }
177 }.onClick(() => { 178 }.onClick(() => {
@@ -179,7 +180,11 @@ export struct SearchResultComponent { @@ -179,7 +180,11 @@ export struct SearchResultComponent {
179 this.controller.changeIndex(this.currentIndex) 180 this.controller.changeIndex(this.currentIndex)
180 }) 181 })
181 .height('100%') 182 .height('100%')
182 - .margin({ right: '9lpx' })  
183 - .padding({ left: '31lpx', right: index === this.count.length - 1 ? "31lpx" : "0lpx" }) 183 + .margin({ right: `${this.calcHeight(9)}lpx` })
  184 + .padding({ left: `${this.calcHeight(31)}lpx`, right: index === this.count.length - 1 ? `${this.calcHeight(31)}lpx` : "0lpx" })
  185 + }
  186 +
  187 + calcHeight(value:number): number{
  188 + return value * this.percent
184 } 189 }
185 } 190 }