developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
王士厅
5cc0986a 1 parent 567175d1

图集无网络缺省图修改

Inline Side-by-side
Showing 7 changed files with 23 additions and 348 deletions
@@ -5,6 +5,7 @@ import { promptAction } from '@kit.ArkUI'; @@ -5,6 +5,7 @@ import { promptAction } from '@kit.ArkUI';
5 import { image } from '@kit.ImageKit'; 5 import { image } from '@kit.ImageKit';
6 import { photoAccessHelper } from '@kit.MediaLibraryKit'; 6 import { photoAccessHelper } from '@kit.MediaLibraryKit';
7 import fs from '@ohos.file.fs'; 7 import fs from '@ohos.file.fs';
  8 +import { NetworkUtil } from 'wdKit';
8 9
9 const PERMISSIONS: Array<Permissions> = [ 10 const PERMISSIONS: Array<Permissions> = [
10 'ohos.permission.READ_IMAGEVIDEO', 11 'ohos.permission.READ_IMAGEVIDEO',
@@ -47,8 +48,13 @@ export struct ImageDownloadComponent { @@ -47,8 +48,13 @@ export struct ImageDownloadComponent {
47 } 48 }
48 49
49 aboutToAppear(): void { 50 aboutToAppear(): void {
  51 + // 注册监听网络连接
  52 + let netStatus = NetworkUtil.isNetConnected()
  53 + if (netStatus) {
  54 + // 有网络
50 this.onChangeUrl() 55 this.onChangeUrl()
51 } 56 }
  57 + }
52 58
53 async onChangeUrl(): Promise<void> { 59 async onChangeUrl(): Promise<void> {
54 console.info(`cj2024 图片下载 ${this.url}`) 60 console.info(`cj2024 图片下载 ${this.url}`)
@@ -27,6 +27,7 @@ export struct MultiPictureDetailItemComponent { @@ -27,6 +27,7 @@ export struct MultiPictureDetailItemComponent {
27 private MultiPictureDetailItem: PhotoListBean = {} as PhotoListBean 27 private MultiPictureDetailItem: PhotoListBean = {} as PhotoListBean
28 //alt app.media.picture_loading 设计稿尺寸 28 //alt app.media.picture_loading 设计稿尺寸
29 @State imageWidth:string | number = 167 29 @State imageWidth:string | number = 167
  30 + private scroller: Scroller = new Scroller()
30 31
31 32
32 async aboutToAppear() { 33 async aboutToAppear() {
@@ -179,6 +180,7 @@ export struct MultiPictureDetailItemComponent { @@ -179,6 +180,7 @@ export struct MultiPictureDetailItemComponent {
179 180
180 build() { 181 build() {
181 Row() { 182 Row() {
  183 + Scroll(this.scroller) {
182 if(this.imageUri != null && (this.imageUri.includes('.gif') || this.imageUri.includes('.GIF'))){ 184 if(this.imageUri != null && (this.imageUri.includes('.gif') || this.imageUri.includes('.GIF'))){
183 Image(this.imageUri)// TODO：知识点：宽高只根据其尺寸设置一个，通过保持宽高比来设置另一个属性 185 Image(this.imageUri)// TODO：知识点：宽高只根据其尺寸设置一个，通过保持宽高比来设置另一个属性
184 .alt($r('app.media.datail_imageLoading_w')) 186 .alt($r('app.media.datail_imageLoading_w'))
@@ -197,7 +199,7 @@ export struct MultiPictureDetailItemComponent { @@ -197,7 +199,7 @@ export struct MultiPictureDetailItemComponent {
197 this.imageWidth = '100%' 199 this.imageWidth = '100%'
198 }) 200 })
199 }else{ 201 }else{
200 - Image(this.imagePixelMap)// TODO：知识点：宽高只根据其尺寸设置一个，通过保持宽高比来设置另一个属性 202 + Image(this.imagePixelMap || 'app.media.datail_imageLoading_w')// TODO：知识点：宽高只根据其尺寸设置一个，通过保持宽高比来设置另一个属性
201 .alt($r('app.media.datail_imageLoading_w')) 203 .alt($r('app.media.datail_imageLoading_w'))
202 .width(this.imageWidth) 204 .width(this.imageWidth)
203 .objectFit(ImageFit.Auto)// TODO：知识点：保持宽高比进行缩放，可以超出父组件，以便实现多图切换的增强功能 205 .objectFit(ImageFit.Auto)// TODO：知识点：保持宽高比进行缩放，可以超出父组件，以便实现多图切换的增强功能
@@ -215,6 +217,10 @@ export struct MultiPictureDetailItemComponent { @@ -215,6 +217,10 @@ export struct MultiPictureDetailItemComponent {
215 }) 217 })
216 } 218 }
217 } 219 }
  220 + .scrollable(ScrollDirection.Vertical)
  221 + .scrollBarWidth(0)
  222 + .height(this.imageDefaultSize.height || "100%")
  223 + }
218 .onBlur(() => { 224 .onBlur(() => {
219 this.resetCurrentImageInfo(); 225 this.resetCurrentImageInfo();
220 }) 226 })
@@ -58,6 +58,7 @@ export struct EmptyComponent { @@ -58,6 +58,7 @@ export struct EmptyComponent {
58 @State emptyHeight: string | number = CommonConstants.FULL_PARENT; 58 @State emptyHeight: string | number = CommonConstants.FULL_PARENT;
59 @State emptyType: number = WDViewDefaultType.WDViewDefaultType_Default; // 缺省图类型，传枚举 59 @State emptyType: number = WDViewDefaultType.WDViewDefaultType_Default; // 缺省图类型，传枚举
60 @State emptyButton: boolean = false 60 @State emptyButton: boolean = false
  61 + @State isBlack: boolean = false // 背景是否为黑色 默认白色
61 @State timeNum: number = 10 62 @State timeNum: number = 10
62 /** 63 /**
63 * The empty image width percentage setting. 64 * The empty image width percentage setting.
@@ -135,7 +136,7 @@ export struct EmptyComponent { @@ -135,7 +136,7 @@ export struct EmptyComponent {
135 }) 136 })
136 137
137 if (this.isShowButton()) { 138 if (this.isShowButton()) {
138 - if (this.emptyType !== 15) { 139 + if (this.emptyType !== 15 && !this.isBlack) {
139 Button('点击重试') 140 Button('点击重试')
140 .type(ButtonType.Normal) 141 .type(ButtonType.Normal)
141 .width(80) 142 .width(80)
@@ -253,7 +254,7 @@ export struct EmptyComponent { @@ -253,7 +254,7 @@ export struct EmptyComponent {
253 } 254 }
254 255
255 isShowButton() { 256 isShowButton() {
256 - if (this.emptyType === 1 || this.emptyType === 9 || this.emptyType === 15) { 257 + if (this.emptyType === 1 || this.emptyType === 9 || this.emptyType === 15 && this.emptyButton) {
257 return true 258 return true
258 } else { 259 } else {
259 return false 260 return false
1 -import { image } from '@kit.ImageKit';  
2 -import { matrix4, promptAction, window } from '@kit.ArkUI';  
3 -import { BusinessError } from '@kit.BasicServicesKit';  
4 -import { ScaleModel } from '../../model/ScaleModel';  
5 -import { OffsetModel } from '../../model/OffsetModel';  
6 -import { windowSizeManager } from '../../utils/Managers';  
7 -import { runWithAnimation } from '../../utils/FuncUtils';  
8 -import { PhotoListBean } from 'wdBean/Index';  
9 -import { http } from '@kit.NetworkKit';  
10 -  
11 -// TODO：知识点：组件复用  
12 -@Reusable  
13 -@Component  
14 -export struct ImageItemView {  
15 - // @Consume private bgc: Color;  
16 - @Link isEnableSwipe: boolean; // TODO：需求：多图切换  
17 - @State isEnableOffset: boolean = false;  
18 - @State imageScaleInfo: ScaleModel = new ScaleModel(1.0, 1.0, 1.5, 0.3);  
19 - @State imageOffsetInfo: OffsetModel = new OffsetModel(0, 0);  
20 - @State matrix: matrix4.Matrix4Transit = matrix4.identity().copy();  
21 - @State imagePixelMap: image.PixelMap | null = null; // 当前图片pixelMap，用于Image组件显示  
22 - @State fitWH: "width" | "height" | undefined = undefined; // 表示当前图片是根据宽度适配还是高度适配  
23 - @State imageDefaultSize: image.Size = { width: 0, height: 0 }; // 图片默认大小，即，与屏幕大小最适配的显示大小  
24 - imageUri: string = ""; // 当前图片uri  
25 - imageWHRatio: number = 0; // 图片原始宽高比  
26 - private MultiPictureDetailItem: PhotoListBean = {} as PhotoListBean  
27 - @State imageBuffer: ArrayBuffer | undefined = undefined; // 图片ArrayBuffer  
28 - //alt app.media.picture_loading 设计稿尺寸  
29 - @State imageWidth:string | number = 167  
30 - private scroller: Scroller = new Scroller()  
31 -  
32 - aboutToAppear(): void {  
33 - this.imageUri = this.MultiPictureDetailItem.picPath  
34 - this.getPicture()  
35 - }  
36 -  
37 - /**  
38 - * 通过http的request方法从网络下载图片资源  
39 - */  
40 - async getPicture() {  
41 - // 每一个httpRequest对应一个HTTP请求任务，不可复用  
42 - let httpRequest = http.createHttp();  
43 - // 用于订阅HTTP响应头事件  
44 - httpRequest.on('headersReceive', (header: Object) => {  
45 - console.info('header: ' + JSON.stringify(header));  
46 - });  
47 - // 用于订阅HTTP流式响应数据接收事件  
48 - let res = new ArrayBuffer(0);  
49 - httpRequest.on('dataReceive', (data: ArrayBuffer) => {  
50 - const newRes = new ArrayBuffer(res.byteLength + data.byteLength);  
51 - const resView = new Uint8Array(newRes);  
52 - resView.set(new Uint8Array(res));  
53 - resView.set(new Uint8Array(data), res.byteLength);  
54 - res = newRes;  
55 - // console.info('dataReceive res length: ' + res.byteLength);  
56 - });  
57 - // 用于订阅HTTP流式响应数据接收完毕事件  
58 - httpRequest.on('dataEnd', () => {  
59 - this.transcodePixelMap(res);  
60 - // 判断网络获取到的资源是否为ArrayBuffer类型  
61 - console.info(`dataEnd getPicture ${res}`)  
62 - if (res instanceof ArrayBuffer) {  
63 - console.info(`dataEnd getPicture`)  
64 - this.imageBuffer = res as ArrayBuffer;  
65 - }  
66 - console.info('No more data in response, data receive end');  
67 - });  
68 - httpRequest.requestInStream(this.imageUri,  
69 - (error: BusinessError, data: number) => {  
70 - if (error) {  
71 - // 下载失败时弹窗提示检查网络，不执行后续逻辑  
72 - promptAction.showToast({  
73 - message: $r('app.string.image_request_fail'),  
74 - duration: 2000  
75 - })  
76 - this.getPicture()  
77 - console.error(`http reqeust failed with. Code: ${error.code}, message: ${error.message}`);  
78 - return;  
79 - }  
80 - // 取消订阅HTTP响应头事件  
81 - httpRequest.off('headersReceive');  
82 - // 取消订阅HTTP流式响应数据接收事件  
83 - httpRequest.off('dataReceive');  
84 - // 取消订阅HTTP流式响应数据接收完毕事件  
85 - httpRequest.off('dataEnd');  
86 - // 当该请求使用完毕时，调用destroy方法主动销毁  
87 - httpRequest.destroy();  
88 - }  
89 - )  
90 - }  
91 -  
92 - /**  
93 - * 使用createPixelMap将ArrayBuffer类型的图片装换为PixelMap类型  
94 - * @param data：网络获取到的资源  
95 - */  
96 - transcodePixelMap(data: ArrayBuffer) {  
97 - const imageData: ArrayBuffer = data;  
98 - // 通过ArrayBuffer创建图片源实例。  
99 - const imageSource: image.ImageSource = image.createImageSource(imageData);  
100 - this.initCurrentImageInfo(imageSource);  
101 - }  
102 -  
103 - /**  
104 - * 根据图片宽高比及窗口大小计算图片的默认宽高，即，图片最适配屏幕的大小  
105 - * @param imageWHRatio：图片原始宽高比  
106 - * @param size：窗口大小{with:number,height:number}  
107 - * @returns image.Size  
108 - */  
109 - calcImageDefaultSize(imageWHRatio: number, size: window.Size): image.Size {  
110 - let width = 0  
111 - let height = 0;  
112 - width = size.width;  
113 - height = size.width / imageWHRatio;  
114 - return { width: width, height: height };  
115 - }  
116 -  
117 - /**  
118 - * TODO：知识点：根据图片大小（宽高<=屏幕宽高）和屏幕大小计算图片放大适配屏幕进行显示的缩放倍率  
119 - * @param imageSize：图片当前大小  
120 - * @param windowSize：窗口大小  
121 - * @returns：缩放倍率  
122 - */  
123 - calcFitScaleRatio(imageSize: image.Size, windowSize: window.Size): number {  
124 - let ratio: number = 1.0;  
125 - if (windowSize.width > imageSize.width) {  
126 - ratio = windowSize.width / imageSize.width;  
127 - } else {  
128 - ratio = windowSize.height / imageSize.height;  
129 - }  
130 - return ratio;  
131 - }  
132 -  
133 - /**  
134 - * 设置当前图片的相关信息：uri、whRatio、pixelMap、fitWH、defaultSize、maxScaleValue  
135 - * TODO：知识点：提前获取图片的信息，以进行Image组件的尺寸设置及后续的相关计算  
136 - */  
137 - initCurrentImageInfo(imageSource: image.ImageSource): void {  
138 - this.matrix = matrix4.identity().copy();  
139 - // const imageSource: image.ImageSource = image.createImageSource(this.imageUri);  
140 - imageSource.getImageInfo(0).then((data: image.ImageInfo) => {  
141 - this.imageWHRatio = data.size.width / data.size.height;  
142 - console.error(`this.imageDefaultSize this.imageWHRatio = ${this.imageWHRatio}`);  
143 - console.error(`this.imageDefaultSize width = ${data.size.width}`);  
144 - console.error(`this.imageDefaultSize height = ${data.size.height}`);  
145 - this.imageDefaultSize = this.calcImageDefaultSize(this.imageWHRatio, windowSizeManager.get());  
146 - console.error(`this.imageDefaultSize = ${JSON.stringify(windowSizeManager.get())}`);  
147 - console.error(`this.imageDefaultSize = ${JSON.stringify(this.imageDefaultSize)}`);  
148 - if (this.imageDefaultSize.width === windowSizeManager.get().width) {  
149 - this.fitWH = "width";  
150 - } else {  
151 - this.fitWH = "height";  
152 - }  
153 - this.imageScaleInfo.maxScaleValue += this.fitWH === "width" ?  
154 - (windowSizeManager.get().height / this.imageDefaultSize.height) :  
155 - (windowSizeManager.get().width / this.imageDefaultSize.width);  
156 - }).catch((err: BusinessError) => {  
157 - console.error(`[error][getImageInfo]${err.message}`);  
158 - });  
159 - imageSource.createPixelMap().then((data: image.PixelMap) => {  
160 - this.imagePixelMap = data;  
161 - }).catch((err: BusinessError) => {  
162 - console.error(`[error][createPixelMap]${err.message}`);  
163 - });  
164 - this.isEnableOffset = false;  
165 - this.imageScaleInfo.reset();  
166 - this.imageOffsetInfo.reset();  
167 - }  
168 -  
169 - /**  
170 - * 在图片消失时，将当前图片的信息设置为默认值  
171 - */  
172 - resetCurrentImageInfo(): void {  
173 - this.imageScaleInfo.reset();  
174 - this.imageOffsetInfo.reset();  
175 - this.matrix = matrix4.identity().copy();  
176 - }  
177 -  
178 - /**  
179 - * TODO：需求：在偏移时评估是否到达边界，以便进行位移限制与图片的切换  
180 - * @returns：长度为4的boolean数组，表示上下左右是否到达边界  
181 - */  
182 - evaluateBound(): boolean[] {  
183 - return [false, false, false, false];  
184 - }  
185 -  
186 - build() {  
187 - Stack() {  
188 - Scroll(this.scroller) {  
189 - if(this.imageUri != null && (this.imageUri.includes('.gif') || this.imageUri.includes('.GIF'))){  
190 - Image(this.imageUri)// TODO：知识点：宽高只根据其尺寸设置一个，通过保持宽高比来设置另一个属性  
191 - .alt($r('app.media.datail_imageLoading_w'))  
192 - .width(this.imageWidth)  
193 - .objectFit(ImageFit.Auto)// TODO：知识点：保持宽高比进行缩放，可以超出父组件，以便实现多图切换的增强功能  
194 - .interpolation(ImageInterpolation.High)  
195 - .autoResize(false)  
196 - .transform(this.matrix)// TODO：知识点：通过matrix控制图片的缩放  
197 - .defaultFocus(true)  
198 - .offset({  
199 - // TODO：知识点：通过offset控制图片的偏移  
200 - x: this.imageOffsetInfo.currentX,  
201 - y: this.imageOffsetInfo.currentY  
202 - })  
203 - .onComplete(event => {  
204 - this.imageWidth = '100%'  
205 - })  
206 - } else {  
207 - Image(this.imagePixelMap)// TODO：知识点：宽高只根据其尺寸设置一个，通过保持宽高比来设置另一个属性  
208 - .alt($r('app.media.datail_imageLoading_w'))  
209 - .width(this.imageWidth)  
210 - .objectFit(ImageFit.Auto)// TODO：知识点：保持宽高比进行缩放，可以超出父组件，以便实现多图切换的增强功能  
211 - .interpolation(ImageInterpolation.High)  
212 - .autoResize(false)  
213 - .transform(this.matrix)// TODO：知识点：通过matrix控制图片的缩放  
214 - .defaultFocus(true)  
215 - .offset({  
216 - // TODO：知识点：通过offset控制图片的偏移  
217 - x: this.imageOffsetInfo.currentX,  
218 - y: this.imageOffsetInfo.currentY  
219 - })  
220 - .onComplete(event => {  
221 - this.imageWidth = '100%'  
222 - })  
223 - }  
224 - }  
225 - .scrollable(ScrollDirection.Vertical)  
226 - .scrollBarWidth(0)  
227 - .constraintSize({  
228 - maxHeight: this.imageDefaultSize.height  
229 - })  
230 - }  
231 - .onBlur(() => {  
232 - this.resetCurrentImageInfo();  
233 - })  
234 - // .backgroundColor(this.bgc)  
235 - .alignContent(Alignment.Center)  
236 - .width("100%")  
237 - .height("100%")  
238 - .backgroundColor(Color.Black)  
239 - .gesture(  
240 - GestureGroup(  
241 - GestureMode.Exclusive,  
242 - // TODO：知识点：双击切换图片大小  
243 - TapGesture({ count: 2 })  
244 - .onAction(() => {  
245 - let fn: Function;  
246 - // 已经是放大状态下，双击缩小  
247 - if (this.imageScaleInfo.scaleValue > this.imageScaleInfo.defaultScaleValue) {  
248 - fn = () => {  
249 - this.isEnableSwipe = true;  
250 - this.imageScaleInfo.reset();  
251 - this.imageOffsetInfo.reset();  
252 - this.matrix = matrix4.identity().copy();  
253 - };  
254 - } else {  
255 - // 已经是缩小状态，双击放大  
256 - fn = () => {  
257 - this.isEnableSwipe = false;  
258 - const ratio: number = this.calcFitScaleRatio(this.imageDefaultSize, windowSizeManager.get());  
259 - this.imageScaleInfo.scaleValue = ratio;  
260 - this.imageOffsetInfo.reset();  
261 - this.matrix = matrix4.identity().scale({  
262 - x: ratio,  
263 - y: ratio,  
264 - }).copy();  
265 - this.imageScaleInfo.stash();  
266 - }  
267 - }  
268 - runWithAnimation(fn);  
269 - }),  
270 - // 单击切换背景色  
271 - // TapGesture({ count: 1 }).onAction(() => {  
272 - // runWithAnimation(() => {  
273 - // this.bgc = this.bgc === Color.White ? Color.Black : Color.White;  
274 - // });  
275 - // }),  
276 - // TODO：知识点：双指捏合缩放图片  
277 - PinchGesture({ fingers: 2, distance: 1 })  
278 - .onActionUpdate((event: GestureEvent) => {  
279 - this.imageScaleInfo.scaleValue = this.imageScaleInfo.lastValue * event.scale;  
280 - // TODO：知识点：缩放时不允许大于最大缩放因子+额外缩放因子，不允许小于默认大小-额外缩放因子，额外缩放因子用于提升用户体验  
281 - if (this.imageScaleInfo.scaleValue > this.imageScaleInfo.maxScaleValue *  
282 - (1 + this.imageScaleInfo.extraScaleValue)  
283 - ) {  
284 - this.imageScaleInfo.scaleValue = this.imageScaleInfo.maxScaleValue *  
285 - (1 + this.imageScaleInfo.extraScaleValue);  
286 - }  
287 - if (this.imageScaleInfo.scaleValue < this.imageScaleInfo.defaultScaleValue *  
288 - (1 - this.imageScaleInfo.extraScaleValue)) {  
289 - this.imageScaleInfo.scaleValue = this.imageScaleInfo.defaultScaleValue *  
290 - (1 - this.imageScaleInfo.extraScaleValue);  
291 - }  
292 - // TODO：知识点：matrix默认缩放中心为组件中心  
293 - this.matrix = matrix4.identity().scale({  
294 - x: this.imageScaleInfo.scaleValue,  
295 - y: this.imageScaleInfo.scaleValue,  
296 - }).copy();  
297 - console.debug(this.imageScaleInfo.toString());  
298 - })  
299 - .onActionEnd((event: GestureEvent) => {  
300 - /**  
301 - * TODO：知识点：当小于默认大小时，恢复为默认大小  
302 - */  
303 - if (this.imageScaleInfo.scaleValue < this.imageScaleInfo.defaultScaleValue) {  
304 - runWithAnimation(() => {  
305 - this.imageScaleInfo.reset();  
306 - this.imageOffsetInfo.reset();  
307 - this.matrix = matrix4.identity().copy();  
308 - })  
309 - }  
310 - // TODO：知识点：当大于最大缩放因子时，恢复到最大  
311 - if (this.imageScaleInfo.scaleValue > this.imageScaleInfo.maxScaleValue) {  
312 - runWithAnimation(() => {  
313 - this.imageScaleInfo.scaleValue = this.imageScaleInfo.maxScaleValue;  
314 - this.matrix = matrix4.identity()  
315 - .scale({  
316 - x: this.imageScaleInfo.maxScaleValue,  
317 - y: this.imageScaleInfo.maxScaleValue  
318 - });  
319 - })  
320 - }  
321 - this.imageScaleInfo.stash();  
322 - }),  
323 - // // TODO：知识点：滑动图片  
324 - // PanGesture({ fingers: 1 })// TODO：需求：默认大小下左右滑动应当是切换图片  
325 - // .onActionUpdate((event: GestureEvent) => {  
326 - // if (this.imageScaleInfo.scaleValue === this.imageScaleInfo.defaultScaleValue) {  
327 - // // 默认大小下不允许移动  
328 - // return;  
329 - // }  
330 - // this.imageOffsetInfo.currentX = this.imageOffsetInfo.lastX + event.offsetX;  
331 - // this.imageOffsetInfo.currentY = this.imageOffsetInfo.lastY + event.offsetY;  
332 - // })  
333 - // .onActionEnd((event: GestureEvent) => {  
334 - // this.imageOffsetInfo.stash();  
335 - // })  
336 - ),  
337 - )  
338 - }  
339 -}  
1 import { PhotoListBean } from 'wdBean/Index'; 1 import { PhotoListBean } from 'wdBean/Index';
2 import { display, router } from '@kit.ArkUI'; 2 import { display, router } from '@kit.ArkUI';
3 -import { ImageItemView } from '../components/view/ImageItemView';  
4 import { ImageDownloadComponent } from '../components/ImageDownloadComponent'; 3 import { ImageDownloadComponent } from '../components/ImageDownloadComponent';
  4 +import { MultiPictureDetailItemComponent } from '../components/MultiPictureDetailItemComponent';
  5 +
5 import { Action } from 'wdBean'; 6 import { Action } from 'wdBean';
6 import { WindowModel } from 'wdKit/Index'; 7 import { WindowModel } from 'wdKit/Index';
7 8
@@ -68,11 +69,10 @@ export struct MultiPictureListPage { @@ -68,11 +69,10 @@ export struct MultiPictureListPage {
68 }) 69 })
69 .id("backImg") 70 .id("backImg")
70 71
71 -  
72 if (this.photoList && this.photoList?.length > 0) { 72 if (this.photoList && this.photoList?.length > 0) {
73 Swiper(this.swiperController) { 73 Swiper(this.swiperController) {
74 ForEach(this.photoList, (item: PhotoListBean) => { 74 ForEach(this.photoList, (item: PhotoListBean) => {
75 - ImageItemView({ MultiPictureDetailItem: item, isEnableSwipe: this.isEnableSwipe }) 75 + MultiPictureDetailItemComponent({ MultiPictureDetailItem: item, isEnableSwipe: this.isEnableSwipe })
76 }) 76 })
77 } 77 }
78 .index(this.swiperIndex) 78 .index(this.swiperIndex)
@@ -135,7 +135,6 @@ export struct MultiPictureListPage { @@ -135,7 +135,6 @@ export struct MultiPictureListPage {
135 middle: { anchor: "__container__", align: HorizontalAlign.Center } 135 middle: { anchor: "__container__", align: HorizontalAlign.Center }
136 }) 136 })
137 } 137 }
138 -  
139 ImageDownloadComponent({ url: this.currentUrl }) 138 ImageDownloadComponent({ url: this.currentUrl })
140 .alignRules({ 139 .alignRules({
141 bottom: { anchor: "__container__", align: VerticalAlign.Bottom }, 140 bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
@@ -152,6 +151,7 @@ export struct MultiPictureListPage { @@ -152,6 +151,7 @@ export struct MultiPictureListPage {
152 .width('100%') 151 .width('100%')
153 .height('100%') 152 .height('100%')
154 .id('e_picture_container') 153 .id('e_picture_container')
  154 + .backgroundColor(Color.Black)
155 } 155 }
156 156
157 aboutToDisappear(): void { 157 aboutToDisappear(): void {
@@ -204,7 +204,7 @@ export struct DetailVideoListPage { @@ -204,7 +204,7 @@ export struct DetailVideoListPage {
204 build() { 204 build() {
205 if (this.netStatus !== undefined) { 205 if (this.netStatus !== undefined) {
206 EmptyComponent({ 206 EmptyComponent({
207 - emptyType: 1, emptyButton: true, retry: () => { 207 + emptyType: 1, emptyButton: true, isBlack: true, retry: () => {
208 this.getContentDetail(this.contentId, this.relId, this.relType) 208 this.getContentDetail(this.contentId, this.relId, this.relType)
209 } 209 }
210 }) 210 })
@@ -525,7 +525,7 @@ export struct MultiPictureDetailPageComponent { @@ -525,7 +525,7 @@ export struct MultiPictureDetailPageComponent {
525 @Builder 525 @Builder
526 noNet() { 526 noNet() {
527 EmptyComponent({ 527 EmptyComponent({
528 - emptyType: 1, emptyButton: true, retry: () => { 528 + emptyType: 1, emptyButton: true, isBlack: true, retry: () => {
529 this.getContentDetailData() 529 this.getContentDetailData()
530 } 530 }
531 }) 531 })
@@ -534,6 +534,7 @@ export struct MultiPictureDetailPageComponent { @@ -534,6 +534,7 @@ export struct MultiPictureDetailPageComponent {
534 center: { anchor: "__container__", align: VerticalAlign.Center }, 534 center: { anchor: "__container__", align: VerticalAlign.Center },
535 middle: { anchor: "__container__", align: HorizontalAlign.Center } 535 middle: { anchor: "__container__", align: HorizontalAlign.Center }
536 }) 536 })
  537 + .backgroundColor(Color.Black)
537 } 538 }
538 539
539 @Builder 540 @Builder