developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
chenjun3_wd
ad8d2cd3 1 parent c0751970

Changes图集卡

Inline Side-by-side
Showing 1 changed file with 76 additions and 74 deletions
@@ -4,7 +4,7 @@ export struct AlbumCard { @@ -4,7 +4,7 @@ export struct AlbumCard {
4 // @State title: Resource = $r('app.string.title_default'); 4 // @State title: Resource = $r('app.string.title_default');
5 5
6 build() { 6 build() {
7 - Column({ space: 8 }) { 7 + Flex({direction:FlexDirection.Column}) {
8 Text('测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字' + 8 Text('测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字' +
9 '测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字' + 9 '测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字' +
10 '测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字') 10 '测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字')
@@ -13,91 +13,90 @@ export struct AlbumCard { @@ -13,91 +13,90 @@ export struct AlbumCard {
13 .fontColor(0x222222) 13 .fontColor(0x222222)
14 .lineHeight(25) 14 .lineHeight(25)
15 .maxLines(3) 15 .maxLines(3)
16 - .margin({ top: 6,  
17 - left: 16,  
18 - right: 16 })  
19 - .width(343) 16 + // .padding({ top: 6,
  17 + // left: 16,
  18 + // right: 16 })
  19 + .width('100%')
20 .height(75) 20 .height(75)
21 21
22 - RelativeContainer() { 22 + Grid() {
  23 + GridItem() {
23 Image($r('app.media.icon')) 24 Image($r('app.media.icon'))
24 - .width(229)  
25 - .height(154)  
26 - .alignRules({  
27 - top: {anchor: "__container__", align: VerticalAlign.Top},  
28 - left: {anchor: "__container__", align: HorizontalAlign.Start}  
29 - })  
30 - .id('mainImage') 25 + .width('100%')
  26 + .height('100%')
  27 + }
  28 + .rowStart(1)
  29 + .rowEnd(2)
  30 + .backgroundColor(0xFF0000)
31 31
  32 + GridItem() {
32 Image($r('app.media.icon')) 33 Image($r('app.media.icon'))
33 - .width(112)  
34 - .height(76)  
35 - .alignRules({  
36 - top: {anchor: "__container__", align: VerticalAlign.Top},  
37 - right: {anchor: "__container__", align: HorizontalAlign.End}  
38 - })  
39 - .id('subTopImage') 34 + .width('100%')
  35 + .height('100%')
  36 + }
  37 + .backgroundColor(0x00FF00)
40 38
41 - Image($r('app.media.icon'))  
42 - .width(112)  
43 - .height(76)  
44 - .alignRules({  
45 - right: {anchor: "__container__", align: HorizontalAlign.End},  
46 - bottom: {anchor: "__container__", align: VerticalAlign.Bottom}  
47 - })  
48 - .id('subBottomImage') 39 + GridItem() {
  40 + Stack({alignContent:Alignment.BottomEnd}) {
  41 + Image($r('app.media.icon'))
  42 + .width('100%')
  43 + .height('100%')
49 44
50 - Shape() {  
51 - Rect().width(33).height(18)  
52 - }  
53 - // .viewPort({ x: -2, y: -2, width: 304, height: 130 })  
54 - .fill(0x000000)  
55 - .fillOpacity(0.3)  
56 - // .strokeDashArray([20])  
57 - // .strokeDashOffset(10)  
58 - .strokeLineCap(LineCapStyle.Round)  
59 - .strokeLineJoin(LineJoinStyle.Round)  
60 - .antiAlias(true)  
61 - .id('shape')  
62 - .alignRules({  
63 - right: {anchor: "__container__", align: HorizontalAlign.End},  
64 - bottom: {anchor: "__container__", align: VerticalAlign.Bottom}  
65 - })  
66 - .margin({right:4 ,  
67 - bottom:4})  
68 45
69 - Image($r('app.media.album_card_shape'))  
70 - .width(22)  
71 - .height(18)  
72 - .alignRules({  
73 - left: {anchor: "shape", align: HorizontalAlign.Start},  
74 - top: {anchor: "shape", align: VerticalAlign.Top}  
75 - })  
76 - .id('shapeSubImage') 46 + Shape() {
  47 + Rect().width(33).height(18)
  48 + }
  49 + // .viewPort({ x: -2, y: -2, width: 304, height: 130 })
  50 + .fill(0x000000)
  51 + .fillOpacity(0.3)
  52 + // .strokeDashArray([20])
  53 + // .strokeDashOffset(10)
  54 + .strokeLineCap(LineCapStyle.Round)
  55 + .strokeLineJoin(LineJoinStyle.Round)
  56 + .antiAlias(true)
  57 + .align(Alignment.BottomEnd)
  58 + .margin({bottom:4,right:4})
77 59
78 - Text('6')  
79 - .fontSize(13)  
80 - .fontColor(0xFFFFFF)  
81 - .id('pageIndex')  
82 - .alignRules({  
83 - right: {anchor: "shape", align: HorizontalAlign.End},  
84 - top: {anchor: "shape", align: VerticalAlign.Top}  
85 - })  
86 - .margin({right:2})  
87 - .textAlign(TextAlign.Center)  
88 - .width(17)  
89 - .height(17) 60 + Image($r('app.media.album_card_shape'))
  61 + .width(22)
  62 + .height(18)
  63 + .align(Alignment.BottomEnd)
  64 + .margin({bottom:4,right:15})
  65 +
  66 + Text('6')
  67 + .fontSize(13)
  68 + .fontColor(0xFFFFFF)
  69 + // .id('pageIndex')
  70 + // .alignRules({
  71 + // right: {anchor: "shape", align: HorizontalAlign.End},
  72 + // top: {anchor: "shape", align: VerticalAlign.Top}
  73 + // })
  74 + .textAlign(TextAlign.Center)
  75 + .width(17)
  76 + .height(17)
  77 + .align(Alignment.BottomEnd)
  78 + .margin({bottom:4,right:4})
  79 +
  80 +
  81 + }
  82 + .width('100%')
  83 + .height('100%')
  84 + }
  85 + .backgroundColor(0x0000FF)
90 } 86 }
91 - .width(343) 87 + .rowsTemplate('1fr 1fr')
  88 + .columnsTemplate('2fr 1fr')
  89 + .columnsGap(2)
  90 + .rowsGap(2)
  91 + .width('100%')
92 .height(154) 92 .height(154)
  93 + // .aspectRatio(343/154)
  94 + .margin({top:8})
93 95
94 Row() { 96 Row() {
95 Text('人民日报') 97 Text('人民日报')
96 .fontSize(13) 98 .fontSize(13)
97 .fontColor(0xB0B0B0) 99 .fontColor(0xB0B0B0)
98 - .margin({  
99 - left:16  
100 - })  
101 100
102 Image($r('app.media.album_card_divide')) 101 Image($r('app.media.album_card_divide'))
103 .width(16) 102 .width(16)
@@ -114,12 +113,15 @@ export struct AlbumCard { @@ -114,12 +113,15 @@ export struct AlbumCard {
114 left:6 113 left:6
115 }) 114 })
116 } 115 }
117 - .width(375) 116 + .width('100%')
118 .height(16) 117 .height(16)
119 - .id('label') 118 + .margin({top:8})
  119 +
120 } 120 }
121 - .width(375) 121 + .width('100%')
122 .height(289) 122 .height(289)
123 - // .backgroundColor(0x000000) 123 + .padding({top: 14,left: 16,right: 16,bottom: 14})
  124 + // .aspectRatio(375 / 289)
  125 + .backgroundColor(0x000000)
124 } 126 }
125 } 127 }