Changes图集卡

@@ -4,7 +4,7 @@ export struct AlbumCard {
   // @State title: Resource = $r('app.string.title_default');
 
   build() {
-    Column({ space: 8 }) {
+    Flex({direction:FlexDirection.Column}) {
       Text('测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字' +
       '测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字' +
       '测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字')
@@ -13,39 +13,35 @@ export struct AlbumCard {
         .fontColor(0x222222)
         .lineHeight(25)
         .maxLines(3)
-        .margin({ top: 6,
-          left: 16,
-          right: 16 })
-        .width(343)
+          // .padding({ top: 6,
+          //   left: 16,
+          //   right: 16 })
+        .width('100%')
         .height(75)
 
-      RelativeContainer() {
+      Grid() {
+        GridItem() {
           Image($r('app.media.icon'))
-            .width(229)
-            .height(154)
-            .alignRules({
-              top: {anchor: "__container__", align: VerticalAlign.Top},
-              left: {anchor: "__container__", align: HorizontalAlign.Start}
-            })
-            .id('mainImage')
+            .width('100%')
+            .height('100%')
+        }
+        .rowStart(1)
+        .rowEnd(2)
+        .backgroundColor(0xFF0000)
 
+        GridItem() {
           Image($r('app.media.icon'))
-            .width(112)
-            .height(76)
-            .alignRules({
-              top: {anchor: "__container__", align: VerticalAlign.Top},
-              right: {anchor: "__container__", align: HorizontalAlign.End}
-            })
-            .id('subTopImage')
+            .width('100%')
+            .height('100%')
+        }
+        .backgroundColor(0x00FF00)
 
+        GridItem() {
+          Stack({alignContent:Alignment.BottomEnd}) {
             Image($r('app.media.icon'))
-            .width(112)
-            .height(76)
-            .alignRules({
-              right: {anchor: "__container__", align: HorizontalAlign.End},
-              bottom: {anchor: "__container__", align: VerticalAlign.Bottom}
-            })
-            .id('subBottomImage')
+              .width('100%')
+              .height('100%')
+
 
             Shape() {
               Rect().width(33).height(18)
@@ -58,46 +54,49 @@ export struct AlbumCard {
             .strokeLineCap(LineCapStyle.Round)
             .strokeLineJoin(LineJoinStyle.Round)
             .antiAlias(true)
-        .id('shape')
-        .alignRules({
-          right: {anchor: "__container__", align: HorizontalAlign.End},
-          bottom: {anchor: "__container__", align: VerticalAlign.Bottom}
-        })
-        .margin({right:4 ,
-        bottom:4})
+            .align(Alignment.BottomEnd)
+            .margin({bottom:4,right:4})
 
             Image($r('app.media.album_card_shape'))
               .width(22)
               .height(18)
-          .alignRules({
-            left: {anchor: "shape", align: HorizontalAlign.Start},
-            top: {anchor: "shape", align: VerticalAlign.Top}
-          })
-          .id('shapeSubImage')
+              .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}
-          })
-          .margin({right:2})
+                // .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%')
         }
-      .width(343)
+        .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)
-          .margin({
-            left:16
-          })
 
         Image($r('app.media.album_card_divide'))
           .width(16)
@@ -114,12 +113,15 @@ export struct AlbumCard {
             left:6
           })
       }
-      .width(375)
+      .width('100%')
       .height(16)
-      .id('label')
+      .margin({top:8})
+
     }
-    .width(375)
+    .width('100%')
     .height(289)
-    // .backgroundColor(0x000000)
+    .padding({top: 14,left: 16,right: 16,bottom: 14})
+    // .aspectRatio(375 / 289)
+    .backgroundColor(0x000000)
   }
 }
\ No newline at end of file