AlbumCardComponent.ets
3.64 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
@Component
export struct AlbumCard {
// @Link isRefreshData: boolean; // Timer to fresh
// @State title: Resource = $r('app.string.title_default');
build() {
Flex({direction:FlexDirection.Column}) {
Text('测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字' +
'测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字' +
'测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字')
.textOverflow({ overflow: TextOverflow.Ellipsis })
.fontSize(17)
.fontColor(0x222222)
.lineHeight(25)
.maxLines(3)
// .padding({ top: 6,
// left: 16,
// right: 16 })
.width('100%')
.height(75)
Grid() {
GridItem() {
Image($r('app.media.icon'))
.width('100%')
.height('100%')
}
.rowStart(1)
.rowEnd(2)
.backgroundColor(0xFF0000)
GridItem() {
Image($r('app.media.icon'))
.width('100%')
.height('100%')
}
.backgroundColor(0x00FF00)
GridItem() {
Stack({alignContent:Alignment.BottomEnd}) {
Image($r('app.media.icon'))
.width('100%')
.height('100%')
Shape() {
Rect().width(33).height(18)
}
// .viewPort({ x: -2, y: -2, width: 304, height: 130 })
.fill(0x000000)
.fillOpacity(0.3)
// .strokeDashArray([20])
// .strokeDashOffset(10)
.strokeLineCap(LineCapStyle.Round)
.strokeLineJoin(LineJoinStyle.Round)
.antiAlias(true)
.align(Alignment.BottomEnd)
.margin({bottom:4,right:4})
Image($r('app.media.album_card_shape'))
.width(22)
.height(18)
.align(Alignment.BottomEnd)
.margin({bottom:4,right:15})
Text('6')
.fontSize(13)
.fontColor(0xFFFFFF)
// .id('pageIndex')
// .alignRules({
// right: {anchor: "shape", align: HorizontalAlign.End},
// top: {anchor: "shape", align: VerticalAlign.Top}
// })
.textAlign(TextAlign.Center)
.width(17)
.height(17)
.align(Alignment.BottomEnd)
.margin({bottom:4,right:4})
}
.width('100%')
.height('100%')
}
.backgroundColor(0x0000FF)
}
.rowsTemplate('1fr 1fr')
.columnsTemplate('2fr 1fr')
.columnsGap(2)
.rowsGap(2)
.width('100%')
.height(154)
// .aspectRatio(343/154)
.margin({top:8})
Row() {
Text('人民日报')
.fontSize(13)
.fontColor(0xB0B0B0)
Image($r('app.media.album_card_divide'))
.width(16)
.height(16)
Text('46分钟前')
.fontSize(13)
.fontColor(0xB0B0B0)
Text('328评')
.fontSize(13)
.fontColor(0xB0B0B0)
.margin({
left:6
})
}
.width('100%')
.height(16)
.margin({top:8})
}
.width('100%')
.height(289)
.padding({top: 14,left: 16,right: 16,bottom: 14})
// .aspectRatio(375 / 289)
.backgroundColor(0x000000)
}
}