王士厅

fix: 图集替换ir单方案,修改了部分,方案还有问题

  1 +import display from '@ohos.display';
  2 +
  3 +const TAG = 'GalleryImage'
  4 +
  5 +@Component
  6 +export struct GalleryImage {
  7 + private url: string = "";
  8 + private index: number = 0;
  9 + @State downLoadEnable: boolean = true;
  10 + @Link isScaling: boolean
  11 + @State showLoading: boolean = false;
  12 + @State rotateAngle: number = 0;
  13 + @State showError: boolean = false;
  14 + @State scaleValue: number = 1;
  15 + @State pinchValue: number = 1;
  16 + @State pinchX: number | string = '50%';
  17 + @State pinchY: number | string = '50%';
  18 + private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.None, fingers: 1 })
  19 + @State offsetX: number = 0
  20 + @State offsetY: number = 0
  21 + @State positionX: number = 0
  22 + @State positionY: number = 0
  23 + private imageWith: number = 0;
  24 + @State sizeValue: number = 0;
  25 +
  26 + //alt app.media.picture_loading 设计稿尺寸
  27 + @State imageWidth:string | number = 167
  28 +
  29 + aboutToAppear(): void {
  30 + this.showLoading = true;
  31 + this.downLoadEnable = false;
  32 + console.info(TAG);
  33 + }
  34 +
  35 + aboutToDisAppear(): void {
  36 + console.info("");
  37 + }
  38 +
  39 + aboutToReuse(): void {
  40 + console.info("");
  41 + }
  42 +
  43 + build() {
  44 + Column() {
  45 + Image(this.url)
  46 + .width(this.imageWidth)
  47 + .height("100%")
  48 + .objectFit(ImageFit.Contain)//todo 加载失败时占位图没隐藏
  49 + .alt($r("app.media.datail_imageLoading_w"))
  50 + .interpolation(ImageInterpolation.High)
  51 + .onComplete(msg => {
  52 + if (msg) {
  53 + this.imageWidth = '100%'
  54 + console.info(TAG, "index:" + this.index + ", loadingStatus:" + msg.loadingStatus)
  55 + // 图片数据加载成功
  56 + if (msg.loadingStatus === 0) {
  57 + this.showLoading = true;
  58 + this.downLoadEnable = false;
  59 + } else if (msg.loadingStatus === 1) {
  60 + // 图片数据解码成功
  61 + this.showLoading = false;
  62 + this.downLoadEnable = true;
  63 + this.imageWith = px2vp(display.getDefaultDisplaySync().width)
  64 + }
  65 + }
  66 + })
  67 + .onError(() => {
  68 + console.info(TAG, "图片加载异常")
  69 + this.showLoading = false;
  70 + this.showError = true;
  71 + })// 在组件上绑定缩放比例,可以通过修改缩放比例来实现组件的缩小或者放大
  72 + .scale({
  73 + x: this.scaleValue,
  74 + y: this.scaleValue,
  75 + z: 1,
  76 + centerX: this.pinchX,
  77 + centerY: this.pinchY
  78 + })// 以组件左上角为坐标原点进行移动
  79 + .translate({ x: this.offsetX, y: this.offsetY, z: 0 })
  80 + .gesture(
  81 + GestureGroup(GestureMode.Parallel,
  82 + // 两指或以上的捏合手势
  83 + PinchGesture({ fingers: 2 })
  84 + .onActionStart(() => {
  85 + console.info(TAG, 'Pinch start');
  86 + })// 当捏合手势触发时,可以通过回调函数获取缩放比例,从而修改组件的缩放比例
  87 + .onActionUpdate((event: GestureEvent) => {
  88 + const scaleValue = this.pinchValue * event.scale;
  89 + if (scaleValue <= 3 && scaleValue >= 0.8) {
  90 + this.scaleValue = scaleValue;
  91 + this.pinchX = event.pinchCenterX;
  92 + this.pinchY = event.pinchCenterY;
  93 + }
  94 + })
  95 + .onActionEnd(() => {
  96 + this.pinchValue = this.scaleValue;
  97 + console.info(TAG, 'Pinch end');
  98 + if (this.pinchValue > 1) {
  99 + this.panOption.setDirection(PanDirection.Horizontal)
  100 + this.isScaling = true;
  101 + } else {
  102 + this.panOption.setDirection(PanDirection.None)
  103 + this.isScaling = false;
  104 + }
  105 + }),
  106 + // 绑定count为1的TapGesture
  107 + TapGesture({ count: 1 })
  108 + .onAction(() => {
  109 + }),
  110 + // 绑定count为2的TapGesture
  111 + TapGesture({ count: 2 })
  112 + .onAction(() => {
  113 + console.info(TAG, '双击 start')
  114 + animateTo({
  115 + duration: 400,
  116 + }, () => {
  117 + this.scaleValue = 1;
  118 + this.pinchX = '50%';
  119 + this.pinchY = '50%';
  120 + this.pinchValue = this.scaleValue;
  121 + this.offsetX = 0;
  122 + this.offsetY = 0;
  123 + this.positionX = 0;
  124 + this.positionY = 0;
  125 + this.panOption.setDirection(PanDirection.None);
  126 + this.isScaling = false;
  127 + })
  128 + }),
  129 + PanGesture(this.panOption)
  130 + .onActionStart(() => {
  131 + console.info(TAG, 'Pan start')
  132 + })
  133 + .onActionUpdate((event?: GestureEvent) => {
  134 + if (event) {
  135 + if (this.scaleValue > 1) {
  136 + this.offsetX = this.positionX + event.offsetX
  137 + this.offsetY = this.positionY + event.offsetY
  138 + this.sizeValue = this.imageWith
  139 + }
  140 + }
  141 + })
  142 + .onActionEnd(() => {
  143 + this.positionX = this.offsetX
  144 + this.positionY = this.offsetY
  145 + console.info(TAG, 'Pan end')
  146 + })
  147 + ))
  148 + }
  149 + .width('100%')
  150 + .height('100%')
  151 + .justifyContent(FlexAlign.Center)
  152 + }
  153 +}
@@ -114,8 +114,16 @@ export struct MultiPictureDetailItemComponent { @@ -114,8 +114,16 @@ export struct MultiPictureDetailItemComponent {
114 calcImageDefaultSize(imageWHRatio: number, size: window.Size): image.Size { 114 calcImageDefaultSize(imageWHRatio: number, size: window.Size): image.Size {
115 let width = 0 115 let width = 0
116 let height = 0; 116 let height = 0;
117 - width = size.width;  
118 - height = size.width / imageWHRatio; 117 + // width = size.width;
  118 + // height = size.width / imageWHRatio;
  119 + if (imageWHRatio > size.width / size.height) {
  120 + // 图片宽高比大于屏幕宽高比,图片默认以屏幕宽度进行显示
  121 + width = size.width;
  122 + height = size.width / imageWHRatio;
  123 + } else {
  124 + height = size.height;
  125 + width = size.height * imageWHRatio;
  126 + }
119 return { width: width, height: height }; 127 return { width: width, height: height };
120 } 128 }
121 129
@@ -179,7 +187,9 @@ export struct MultiPictureDetailItemComponent { @@ -179,7 +187,9 @@ export struct MultiPictureDetailItemComponent {
179 Image(this.imagePixelMap || 'app.media.datail_imageLoading_w')// TODO:知识点:宽高只根据其尺寸设置一个,通过保持宽高比来设置另一个属性 187 Image(this.imagePixelMap || 'app.media.datail_imageLoading_w')// TODO:知识点:宽高只根据其尺寸设置一个,通过保持宽高比来设置另一个属性
180 .alt($r('app.media.datail_imageLoading_w')) 188 .alt($r('app.media.datail_imageLoading_w'))
181 .width(this.imageWidth) 189 .width(this.imageWidth)
  190 + .aspectRatio(this.imageWHRatio)
182 .objectFit(ImageFit.Cover)// TODO:知识点:保持宽高比进行缩放,可以超出父组件,以便实现多图切换的增强功能 191 .objectFit(ImageFit.Cover)// TODO:知识点:保持宽高比进行缩放,可以超出父组件,以便实现多图切换的增强功能
  192 + .autoResize(false)
183 .interpolation(ImageInterpolation.High) 193 .interpolation(ImageInterpolation.High)
184 .autoResize(false) 194 .autoResize(false)
185 .transform(this.matrix)// TODO:知识点:通过matrix控制图片的缩放 195 .transform(this.matrix)// TODO:知识点:通过matrix控制图片的缩放
@@ -229,11 +239,6 @@ export struct MultiPictureDetailItemComponent { @@ -229,11 +239,6 @@ export struct MultiPictureDetailItemComponent {
229 .gesture( 239 .gesture(
230 GestureGroup( 240 GestureGroup(
231 GestureMode.Exclusive, 241 GestureMode.Exclusive,
232 - // 单击返回上一层  
233 - // TapGesture({ count: 1 })  
234 - // .onAction(() => {  
235 - // router.back()  
236 - // }),  
237 // TODO:知识点:双击切换图片大小 242 // TODO:知识点:双击切换图片大小
238 TapGesture({ count: 2 }) 243 TapGesture({ count: 2 })
239 .onAction(() => { 244 .onAction(() => {
@@ -315,9 +320,10 @@ export struct MultiPictureDetailItemComponent { @@ -315,9 +320,10 @@ export struct MultiPictureDetailItemComponent {
315 } 320 }
316 this.imageScaleInfo.stash(); 321 this.imageScaleInfo.stash();
317 }), 322 }),
318 - // // TODO:知识点:滑动图片 323 + // TODO:知识点:滑动图片
319 // PanGesture({ fingers: 1 })// TODO:需求:默认大小下左右滑动应当是切换图片 324 // PanGesture({ fingers: 1 })// TODO:需求:默认大小下左右滑动应当是切换图片
320 // .onActionUpdate((event: GestureEvent) => { 325 // .onActionUpdate((event: GestureEvent) => {
  326 + // console.log(TAG, "PanGesture", JSON.stringify(event))
321 // if (this.imageScaleInfo.scaleValue === this.imageScaleInfo.defaultScaleValue) { 327 // if (this.imageScaleInfo.scaleValue === this.imageScaleInfo.defaultScaleValue) {
322 // // 默认大小下不允许移动 328 // // 默认大小下不允许移动
323 // return; 329 // return;
@@ -100,6 +100,7 @@ export struct MultiPictureListPage { @@ -100,6 +100,7 @@ export struct MultiPictureListPage {
100 .vertical(false) 100 .vertical(false)
101 .autoPlay(false) 101 .autoPlay(false)
102 .loop(false) 102 .loop(false)
  103 + .disableSwipe(!this.isEnableSwipe)
103 .effectMode(EdgeEffect.None) 104 .effectMode(EdgeEffect.None)
104 .cachedCount(3) 105 .cachedCount(3)
105 .indicator(false) 106 .indicator(false)
  1 +import {
  2 + PhotoListBean,
  3 +} from 'wdBean';
  4 +
  5 +export class MyDataSource implements IDataSource {
  6 +
  7 + private list: PhotoListBean[] = []
  8 +
  9 + // private listener: DataChangeListener
  10 +
  11 + constructor(list: PhotoListBean[]) {
  12 + this.list = list
  13 + }
  14 +
  15 + totalCount(): number {
  16 + return this.list.length
  17 + }
  18 +
  19 + getData(index: number): PhotoListBean {
  20 + return this.list[index]
  21 + }
  22 +
  23 + getList(): PhotoListBean[] {
  24 + return this.list;
  25 + }
  26 +
  27 + registerDataChangeListener(listener: DataChangeListener): void {
  28 + // this.listener = listener
  29 + }
  30 +
  31 + unregisterDataChangeListener() {
  32 + }
  33 +}
@@ -337,6 +337,7 @@ export struct MultiPictureDetailPageComponent { @@ -337,6 +337,7 @@ export struct MultiPictureDetailPageComponent {
337 .indicator(false) 337 .indicator(false)
338 .displayCount(1) 338 .displayCount(1)
339 .loop(false) 339 .loop(false)
  340 + .disableSwipe(!this.isEnableSwipe)
340 .effectMode(EdgeEffect.Spring) 341 .effectMode(EdgeEffect.Spring)
341 .id('e_swiper_content') 342 .id('e_swiper_content')
342 .alignRules({ 343 .alignRules({