王士厅

电子报折叠屏适配

@@ -37,7 +37,7 @@ export struct ENewspaperItemComponent { @@ -37,7 +37,7 @@ export struct ENewspaperItemComponent {
37 .onComplete(() => { 37 .onComplete(() => {
38 this.isShowSkeleton = false 38 this.isShowSkeleton = false
39 }) 39 })
40 - .objectFit(ImageFit.Fill) 40 + .objectFit(ImageFit.Contain)
41 .visibility(this.isShowSkeleton ? Visibility.None : Visibility.Visible) 41 .visibility(this.isShowSkeleton ? Visibility.None : Visibility.Visible)
42 42
43 Canvas(this.context) 43 Canvas(this.context)
@@ -12,9 +12,13 @@ import { newsSkeleton } from './skeleton/newsSkeleton'; @@ -12,9 +12,13 @@ import { newsSkeleton } from './skeleton/newsSkeleton';
12 import { Logger, ToastUtils, NetworkUtil } from 'wdKit/Index'; 12 import { Logger, ToastUtils, NetworkUtil } from 'wdKit/Index';
13 import { TrackingContent,TrackConstants, TrackingButton } from 'wdTracking/Index'; 13 import { TrackingContent,TrackConstants, TrackingButton } from 'wdTracking/Index';
14 import { WDShare } from 'wdShare/Index'; 14 import { WDShare } from 'wdShare/Index';
  15 +import { window } from '@kit.ArkUI';
  16 +import { WindowModel } from 'wdKit';
  17 +
15 //电子报UI 18 //电子报UI
16 @Component 19 @Component
17 export struct ENewspaperPageComponent { 20 export struct ENewspaperPageComponent {
  21 + private windowClass?: window.Window;
18 private displayTool = display.getDefaultDisplaySync() 22 private displayTool = display.getDefaultDisplaySync()
19 private screenWidth: number = 0 23 private screenWidth: number = 0
20 private picWidth: number = 0 24 private picWidth: number = 0
@@ -30,6 +34,7 @@ export struct ENewspaperPageComponent { @@ -30,6 +34,7 @@ export struct ENewspaperPageComponent {
30 @State selectDate: Date = new Date() 34 @State selectDate: Date = new Date()
31 @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0 35 @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
32 @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0 36 @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
  37 + @State ratio: string = '100%'
33 38
34 //watch监听报纸页码回调 39 //watch监听报纸页码回调
35 onCurrentPageNumUpdated(): void { 40 onCurrentPageNumUpdated(): void {
@@ -101,8 +106,12 @@ export struct ENewspaperPageComponent { @@ -101,8 +106,12 @@ export struct ENewspaperPageComponent {
101 // }) 106 // })
102 107
103 async aboutToAppear() { 108 async aboutToAppear() {
  109 + this.windowClass = WindowModel.shared.getWindowClass(); // 获取应用主窗口
  110 + this.screenWidth = this.windowClass?.getWindowProperties()?.windowRect.width
  111 + console.log('ENewspaperPageComponent this.screenWidth', this.screenWidth)
  112 + // 2000折叠屏 TODO DeviceUtil 方法完善了换判断条件
  113 + this.ratio = this.screenWidth > 2000 ? '60%' : '100%'
104 //获取宽高尺寸 114 //获取宽高尺寸
105 - this.screenWidth = this.displayTool.width  
106 this.picWidth = this.screenWidth - vp2px(52) 115 this.picWidth = this.screenWidth - vp2px(52)
107 let screenHeight = this.displayTool.height; 116 let screenHeight = this.displayTool.height;
108 // bottomSafeHeight 底导高度 topSafeHeight 顶导高度 44 顶部高度 60 底部高度 117 // bottomSafeHeight 底导高度 topSafeHeight 顶导高度 44 顶部高度 60 底部高度
@@ -121,6 +130,7 @@ export struct ENewspaperPageComponent { @@ -121,6 +130,7 @@ export struct ENewspaperPageComponent {
121 }) 130 })
122 this.getNewspaperTime() 131 this.getNewspaperTime()
123 this.getNewspaperList() 132 this.getNewspaperList()
  133 + this.resizeWindow()
124 } 134 }
125 135
126 aboutToDisappear() { 136 aboutToDisappear() {
@@ -130,6 +140,15 @@ export struct ENewspaperPageComponent { @@ -130,6 +140,15 @@ export struct ENewspaperPageComponent {
130 // if (this.listDialogController) { 140 // if (this.listDialogController) {
131 // this.listDialogController = null 141 // this.listDialogController = null
132 // } 142 // }
  143 + this.windowClass?.off('windowSizeChange');
  144 + }
  145 +
  146 + resizeWindow() {
  147 + this.windowClass?.on('windowSizeChange', () => {
  148 + this.screenWidth = this.windowClass?.getWindowProperties()?.windowRect.width || this.displayTool.width
  149 + // 2000折叠屏 TODO DeviceUtil 方法完善了换判断条件
  150 + this.ratio = this.screenWidth > 2000 ? '60%' : '100%'
  151 + });
133 } 152 }
134 153
135 build() { 154 build() {
@@ -217,7 +236,7 @@ export struct ENewspaperPageComponent { @@ -217,7 +236,7 @@ export struct ENewspaperPageComponent {
217 }) 236 })
218 } 237 }
219 .index(this.swiperIndex) 238 .index(this.swiperIndex)
220 - .width('100%') 239 + .width(this.ratio)
221 // newspaper_shadow 44 高度 e_newspaper_content 35 margin top 240 // newspaper_shadow 44 高度 e_newspaper_content 35 margin top
222 .height(px2vp(this.picHeight) - 44 - 35) 241 .height(px2vp(this.picHeight) - 44 - 35)
223 .vertical(true) 242 .vertical(true)