图集沉浸式

zhenghy
Commit 94a8ecdeb1c7822434d6b045a81709198147d3bd 94a8ecde 1 parent b5a6c84e
Showing 1 changed file with 53 additions and 29 deletions
sight_harmony/features/wdComponent/src/main/ets/components/MultiPictureDetailPageComponent.ets
--- a/sight_harmony/features/wdComponent/src/main/ets/components/MultiPictureDetailPageComponent.ets
View file @94a8ecd
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/MultiPictureDetailPageComponent.ets
View file @94a8ecd
@@ -28,7 +28,7 @@ export struct MultiPictureDetailPageComponent {
   private picWidth: number = 0
   @State picHeight: number = 0
   @State titleHeight: number = 0
-  @State contentDetailData: ContentDetailDTO  = {} as ContentDetailDTO
+  @State contentDetailData: ContentDetailDTO = {} as ContentDetailDTO
   @Provide @Watch('onCurrentPageNumUpdated') currentPageNum: string = '01'
   private swiperController: SwiperController = new SwiperController()
   @State swiperIndex: number = 0;
@@ -37,13 +37,12 @@ export struct MultiPictureDetailPageComponent {
   //watch监听页码回调
   onCurrentPageNumUpdated(): void {
-    Logger.info(TAG, `currentPageNum：${this.currentPageNum}`, )
+    Logger.info(TAG, `currentPageNum：${this.currentPageNum}`,)
     let _swiperIndex = Number.parseInt(this.currentPageNum)
     Logger.info(TAG, `_swiperIndex：${_swiperIndex}`)
     this.swiperIndex = _swiperIndex > 0 ? _swiperIndex - 1 : _swiperIndex
   }
-
   async aboutToAppear() {
     //获取宽高尺寸
     this.screenWidth = this.displayTool.width
@@ -72,7 +71,7 @@ export struct MultiPictureDetailPageComponent {
       if (this.contentDetailData?.photoList && this.contentDetailData?.photoList?.length > 0) {
         Swiper(this.swiperController) {
           ForEach(this.contentDetailData.photoList, (item: PhotoListBean) => {
-            MultiPictureDetailItemComponent({  MultiPictureDetailItem: item })
+            MultiPictureDetailItemComponent({ MultiPictureDetailItem: item })
           })
         }
         .index(this.swiperIndex)
@@ -91,10 +90,11 @@ export struct MultiPictureDetailPageComponent {
         .onChange((index: number) => {
           this.swiperIndex = index
         })
-        if(this.contentDetailData.rmhPlatform == 1) {
+
+        if (this.contentDetailData.rmhPlatform == 1) {
           Row() {
-            Row(){
-              Row({space: 8}) {
+            Row() {
+              Row({ space: 8 }) {
                 Image(this.contentDetailData?.rmhInfo?.rmhHeadUrl)
                   .borderRadius('50%')
                   .alt($r('app.media.picture_loading'))
@@ -105,6 +105,7 @@ export struct MultiPictureDetailPageComponent {
               }
               .width('13%')
               .height('100%')
+
               Row() {
                 Flex({
                   direction: FlexDirection.Column,
@@ -124,7 +125,7 @@ export struct MultiPictureDetailPageComponent {
                     .fontWeight(400)
                     .lineHeight(14)
                     .textOverflow({ overflow: TextOverflow.Clip })
-                    .margin (0)
+                    .margin(0)
                 }
               }
               .width('81%')
@@ -136,10 +137,11 @@ export struct MultiPictureDetailPageComponent {
               top: 0,
               bottom: 0,
               left: 16,
-              right:0
+              right: 0
             })
-            if(this.followStatus == '0') {
-              Row(){
+
+            if (this.followStatus == '0') {
+              Row() {
                 Button('+关注', { type: ButtonType.Normal, stateEffect: true })
                   .borderRadius(4)
                   .backgroundColor('#ED2800')
@@ -152,7 +154,7 @@ export struct MultiPictureDetailPageComponent {
                     top: 10,
                     bottom: 10,
                     left: 16,
-                    right:16
+                    right: 16
                   })
                   .fontSize(12)
                   .fontColor(Color.White)
@@ -169,7 +171,7 @@ export struct MultiPictureDetailPageComponent {
           })
           .id('e_attention')
         }
-        Row(){
+        Row() {
           Scroll(this.scroller) {
             Row() {
               Flex({
@@ -177,22 +179,38 @@ export struct MultiPictureDetailPageComponent {
                 justifyContent: FlexAlign.Start
               }) {
                 Text() {
-                  Span(`${this.swiperIndex + 1}`).fontSize(24).fontFamily('PingFang SC-Medium').fontWeight(500).lineHeight(28)
-                  Span(`/${this.contentDetailData.photoList.length}`).fontSize(14).fontFamily('PingFang SC-Medium').fontWeight(500).lineHeight(19)
+                  Span(`${this.swiperIndex + 1}`)
+                    .fontSize(24)
+                    .fontFamily('PingFang SC-Medium')
+                    .fontWeight(500)
+                    .lineHeight(28)
+                  Span(`/${this.contentDetailData.photoList.length}`)
+                    .fontSize(14)
+                    .fontFamily('PingFang SC-Medium')
+                    .fontWeight(500)
+                    .lineHeight(19)
                 }.fontColor(Color.White).margin(4)
-                Text(`${this.contentDetailData.newsTitle}`).fontColor(Color.White).fontSize(16).fontFamily('PingFang SC-Semibold')
-                  .fontWeight(600).lineHeight(24)
-                  .margin ({
+                Text(`${this.contentDetailData.newsTitle}`)
+                  .fontColor(Color.White)
+                  .fontSize(16)
+                  .fontFamily('PingFang SC-Semibold')
+                  .fontWeight(600)
+                  .lineHeight(24)
+                  .margin({
                     top: 4,
                     left: 0,
                     bottom: 4,
                     right: 0
                   })
-                Text(`${this.contentDetailData.photoList?.[this.swiperIndex].picDesc}`).fontColor(Color.White)
-                  .fontSize(14).fontFamily('PingFang SC-Regular').fontWeight(400).lineHeight(22)
+                Text(`${this.contentDetailData.photoList?.[this.swiperIndex].picDesc}`)
+                  .fontColor(Color.White)
+                  .fontSize(14)
+                  .fontFamily('PingFang SC-Regular')
+                  .fontWeight(400)
+                  .lineHeight(22)
                   .textOverflow({ overflow: TextOverflow.Ellipsis })
-                  .margin ({
+                  .margin({
                     top: 4,
                     left: 0,
                     bottom: 4,
@@ -202,7 +220,7 @@ export struct MultiPictureDetailPageComponent {
               }
             }
             .width('100%')
-            .margin ({
+            .margin({
               top: 8,
               left: 18,
               bottom: 24,
@@ -227,13 +245,15 @@ export struct MultiPictureDetailPageComponent {
             bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
             middle: { anchor: "__container__", align: HorizontalAlign.Center }
           })
-          .width('100%').height(56).margin({
-          top: 16,
-          left: 16,
-          right:16,
-          bottom: 0
-        })
-          .border({ width: {top: 0.5}, color: '#FFFFFF' })
+          .width('100%')
+          .height(56)
+          .margin({
+            top: 16,
+            left: 16,
+            right: 16,
+            bottom: 0
+          })
+          .border({ width: { top: 0.5 }, color: '#FFFFFF' })
           .id('e_oper_row')
       }
     }
@@ -241,6 +261,9 @@ export struct MultiPictureDetailPageComponent {
     .height('100%')
     .backgroundColor(Color.Black)
     .id('e_picture_container')
+    // 设置顶部绘制延伸到状态栏
+    // 设置底部绘制延伸到导航条
+    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
   }
   private async getContentDetailData() {
@@ -285,6 +308,7 @@ export struct MultiPictureDetailPageComponent {
     }
   }
+
   /**
    * 关注号主
    */