DemoPreviewerComponent.ets
5.2 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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
import { CompDTO, ContentDTO } from 'wdBean';
const FULL_PARENT: string = '100%';
const COLUMNS_TEMPLATE_ONE: string = '1fr';
const COLUMNS_TEMPLATE_TWO: string = '1fr 1fr';
const COLUMNS_TEMPLATE_THREE: string = '1fr 1fr 1fr';
const COLUMNS_TEMPLATE_FOUR: string = '1fr 1fr 1fr 1fr';
const COLUMNS_TEMPLATE_SIX: string = '1fr 1fr 1fr 1fr 1fr 1fr';
const TAG = 'DemoPreviewerComponent';
/**
* xxxx 布局及功能说明
*
* 【查看ArkUI预览效果】在线参考文档：
* https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/previewer-0000001054328973-V3#section146052489820
*/
@Entry
@Component
export struct DemoPreviewerComponent {
@State compDTO: CompDTO = {
compStyle: 'compStyle3',
operDataList: [
{
title: 'title0',
description: "description0",
coverUrl: 'https://uatjdcdnphoto.aikan.pdnews.cn/sjbj-20231208/image/display/d4496925a1264a749975ae9b01a4ef46.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg'
} as ContentDTO,
{
title: 'title1 title1 title1 title1 title1 title1 title1 title1 title1',
description: "description1",
coverUrl: "https://uatjdcdnphoto.aikan.pdnews.cn/sjbj-20240104/image/display/c4a9b526e0994d1bbd3ac8450f5cfc6c.jpg?x-oss-process=image/resize,w_550/quality,q_90/format,jpg",
} as ContentDTO,
{
title: 'title2',
description: "description2",
coverUrl: "https://cdnjdphoto.aikan.pdnews.cn/sjbj-20231206/image/live/bbe6d821e92b48919d90c7dadfd1f05a.jpg?x-oss-process=image/resize,l_850/auto-orient,1/quality,q_95/format,jpg",
} as ContentDTO,
{
title: 'title3',
description: "description3",
coverUrl: 'https://cdnjdphoto.aikan.pdnews.cn/sjbj-20231109/image/live/102e6eb9356b4ef19405b04c1f6ff875.png?x-oss-process=image/resize,l_850/auto-orient,1/quality,q_95/format,jpg'
} as ContentDTO,
{
title: 'title4',
description: "description4",
coverUrl: "https://uatjdcdnphoto.aikan.pdnews.cn/sjbj-20231218/image/display/62bdbbb35dbd45689e00790c81f04c4b.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg",
} as ContentDTO,
{
title: 'title5',
description: "description5",
coverUrl: "https://uatjdcdnphoto.aikan.pdnews.cn/sjbj-20231218/image/display/f79bbaa5a33b4bd88176071c4f797ff6.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg",
} as ContentDTO,
{
title: 'title6',
description: "description6",
coverUrl: "https://uatjdcdnphoto.aikan.pdnews.cn/sjbj-20231218/image/display/2c1d917009584ce2bb4a35cbb3a860a0.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg",
} as ContentDTO,
{
title: 'title7',
description: "description7",
coverUrl: "https://uatjdcdnphoto.aikan.pdnews.cn/sjbj-20231222/image/display/117dc516ca5c42d5843c0d32050c9fc6.jpeg?x-oss-process=image/resize,w_240/quality,q_90/format,jpg",
} as ContentDTO,
{
title: 'title8',
description: "description8",
coverUrl: "https://uatjdcdnphoto.aikan.pdnews.cn/sjbj-20231228/image/display/90a2db4077d44a1f887f068fc659d977.jpeg?x-oss-process=image/resize,w_550/quality,q_90/format,jpg",
} as ContentDTO
]
} as CompDTO
aboutToAppear() {
// this.compDTO = {
// compStyle: 'compStyle3',
// operDataList: [
// {
// title: 'title0',
// description: "description0",
// coverUrl: 'https://uatjdcdnphoto.aikan.pdnews.cn/sjbj-20231208/image/display/d4496925a1264a749975ae9b01a4ef46.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg'
// } as ContentDTO
// ]
// } as CompDTO
this.compDTO.operDataList[0].title = 'title_first_0'
}
build() {
Grid() {
ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
GridItem() {
this.gridItemView(item, index)
}
}, (item: ContentDTO, index: number) => JSON.stringify(item))
}
.height(FULL_PARENT)
.margin({ top: 10, bottom: 10, left: $r('app.float.main_margin'), right: $r('app.float.main_margin') })
.columnsTemplate(COLUMNS_TEMPLATE_TWO)
.columnsGap(4)
.rowsGap(2)
}
/**
* 布局描述
*
* @param ContentDTO item 组件项
* @param index
*/
@Builder
gridItemView(item: ContentDTO, index: number) {
Column() {
Image(item.coverUrl)
.width(FULL_PARENT)// .aspectRatio(3 / 4) // 宽/高比：纵向
// .aspectRatio(1 / 1) // 宽/高比：正方形
.aspectRatio(16 / 9)// 宽/高比：横向
.margin({ top: 8 })
.borderRadius(10)
Text(item.title)
.width(FULL_PARENT)
.margin({ top: 4, left: 2, right: 2, bottom: 4 })
.backgroundColor(Color.White)
.fontWeight(FontWeight.Bold)// .textAlign(TextAlign.Center)
.fontSize($r('app.float.font_size_12'))
.fontColor('#808080')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
.width(FULL_PARENT)
.backgroundColor(Color.Yellow)
.justifyContent(FlexAlign.Center)
.onClick(() => {
console.info(TAG, `gridItemView onClick, index: ${index}`);
// MGRouterRule.jumpWithAction(item.action)
})
}
}