增加可以直接预览页面组件demo, DemoPreviewerComponent

 
 
 export { PageViewModel } from "./viewmodel/PageViewModel"
 export { PageViewModel } from "./viewmodel/PageViewModel"
 
 
+export { DemoPreviewerComponent} from "./components/DemoPreviewerComponent"
+
 export { EmptyComponent } from "./components/EmptyComponent"
 export { EmptyComponent } from "./components/EmptyComponent"
 
 
 export { ErrorComponent } from "./components/ErrorComponent"
 export { ErrorComponent } from "./components/ErrorComponent"

+import { CompDTO } from '../repository/bean/CompDTO';
+import { ContentDTO } from '../repository/bean/ContentDTO';
+
+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)
+    })
+  }
+}

 {
 {
   "src": [
   "src": [
+    "components/DemoPreviewerComponent",
     "components/SmallVideoCardComponent"
     "components/SmallVideoCardComponent"
   ]
   ]
 }
 }