SearchRelatedComponent.ets
2.31 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import { SearchRelatedItem } from '../../viewmodel/SearchRelatedItem'
const TAG = "SearchRelatedComponent"
/**
* 相关搜索
*/
@Component
export struct SearchRelatedComponent {
@Link relatedSearchContentData: SearchRelatedItem[]
onGetSearchRes?: (item:string) => void;
@Prop searchText: string
@Prop percent:number = 1
build() {
Column() {
List() {
ForEach(this.relatedSearchContentData, (item: SearchRelatedItem, index: number) => {
ListItem() {
Column(){
Row() {
Image($r('app.media.search_related_item_icon'))
.width(`${this.calcHeight(31)}lpx`)
.height(`${this.calcHeight(31)}lpx`)
.objectFit(ImageFit.Auto)
.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(`${this.calcHeight(31)}lpx`)
.fontWeight(400)
.lineHeight(`${this.calcHeight(50)}lpx`)
})
}
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.layoutWeight(1)
}.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Start)
.height(`${this.calcHeight(95)}lpx`)
if (index != this.relatedSearchContentData.length - 1) {
Divider()
.width('100%')
.height(`${this.calcHeight(1)}lpx`)
.color($r('app.color.color_F5F5F5'))
.strokeWidth(`${this.calcHeight(1)}lpx`)
}
}
}.width('100%')
.onClick(()=>{
if (this.onGetSearchRes !== undefined) {
this.onGetSearchRes(item.data_string)
}
})
})
}.width('100%')
}.width('100%')
.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
}
}