HarmonyOS如何获取指定子组件的宽高

@Component 
export default struct QLImage { 
 
  url:string|undefined = undefined 
  build() { 
    Image(this.getOssResizeUrl(this.url)) // 想动态获取到image当前的宽和高 
  } 
 
  getOssResizeUrl(originUrl:string|undefined){ 
    let imageWidth = ？？//Image的宽 
    let imageHeight = ？？// Image的高 
    newUrl = `${originUrl}?x-oss-process=image/resize,w_${width},h_${height},m_${this.scaleMode}` 
    return newUrl 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

如上面例子中，如何动态获取到Image组件的宽和高呢？

HarmonyOS

superinsect

2024-08-09 11:26:41

858浏览

回答 1

按赞同

按时间

zxjiu

获取指定子组件的宽高可以用onAreaChange，onAreaChange事件指组件显示的尺寸、位置等发生变化时触发的事件，当组件初次渲染或后续发生变化时都可监听到，参数newValue中有组件宽高等值，具体使用方法请参考文档。文档链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-component-area-change-event-V5#示例

可在aboutToAppear中能获取到网络图片的宽高信息，参考如下代码：

import {image} from '@kit.ImageKit'; 
@Entry 
@Component 
struct Index { 
  @State message: string = 'Hello World'; 
  @State _pixelMap: image.PixelMap | undefined = undefined; 
  @State with: number = 0 
  @State hig: number = 0 
  async aboutToAppear() { 
    console.error("aboutToAppear start."); 
    let resourceManager = getContext(this).resourceManager; 
    let imageArray = await resourceManager.getMediaContent($r('app.media.startIcon')); 
    let imageResource = image.createImageSource(imageArray.buffer); 
    let opts: image.DecodingOptions = { editable: true } 
    this._pixelMap = await imageResource.createPixelMap(opts); 
    this._pixelMap.getImageInfo().then((imageInfo : image.ImageInfo) => { 
      if (imageInfo == undefined) { 
        console.error("Failed to obtain the image pixel map information."); 
      } 
      this.with = imageInfo.size.width; 
      this.hig = imageInfo.size.height; 
      console.log("Succeeded in obtaining the image pixel map information.", this.with, this.hig); 
    }) 
    console.error("aboutToAppear end."); 
  } 
  build() { 
    Row() { 
      Column() { 
        Text(this.message) 
          .fontSize(50) 
          .fontWeight(FontWeight.Bold) 
      } 
      .width(this.with) 
      .height(this.hig) 
      .backgroundColor(Color.Green) 
    } 
    .height('100%') 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.

动态获取Image的宽高，可以根据组件ID获取组件实例对象, 通过组件实例对象将获取的坐标位置和大小，参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-componentutils-0000001861886569-V5#ZH-CN_TOPIC_0000001834298964__componentutilsgetrectanglebyid

同时需要在目标组件布局、完成以后获取目标组件区域大小信息，建议在@ohos.arkui.inspector(布局回调)接收到布局完成的通知以后使用该接口：参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-inspector-0000001815246506-V5#ZH-CN_TOPIC_0000001834299532__inspectorcreatecomponentobserver

代码实现：

import {inspector} from '@kit.ArkUI' 
import {componentUtils} from '@kit.ArkUI' 
@Entry 
@Component 
struct WebPage { 
  @State message: string = 'Hello World'; 
  @State value: string = ''; 
  listener:inspector.ComponentObserver = inspector.createComponentObserver('image_01'); 
  getOssResizeUrl(originUrl:string|undefined){ 
    let imgWidth: string = ''; 
    let imgHeight: string = ''; 
    let onLayoutComplete:()=>void=():void=> { 
      this.value = JSON.stringify(componentUtils.getRectangleById("image_01")); 
      imgWidth = JSON.parse(this.value).size.width; 
      imgHeight = JSON.parse(this.value).size.height; 
      console.log('[LOG]imageInfo', this.value); 
      console.log('[LOG]imgWidth', imgWidth); 
      console.log('[LOG]imgHeight', imgHeight); 
    } 
    let FuncLayout = onLayoutComplete; 
    this.listener.on('draw', FuncLayout); 
    let newUrl = ''; 
    return newUrl = `https://xxx.xxx.com/it/u=435134468,1942448903&fm=253&fmt=auto&app=120&f=JPEG?w=${imgWidth}&h=${imgHeight}` 
  } 
  build() { 
    Column() { 
      Image(this.getOssResizeUrl('https://xxx.xxx.com/it/u=999135798,1460406615&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500')) 
        // Image('https://xxx.xxx.com/it/u=435134468,1942448903&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=889') 
        // Image($r('app.media.webimg1')) 
        .key("image_01") 
        .id("image_01") 
        .height('300px') 
        .width('300px') 
    } 
  } 
} 
//可配合生命周期使用 
import {inspector} from '@kit.ArkUI' 
import {componentUtils} from '@kit.ArkUI' 
@Entry 
@Component 
struct WebPage { 
  @State message: string = 'Hello World'; 
  @State value: string = ''; 
  @State newUrl:string = ''; 
  listener:inspector.ComponentObserver = inspector.createComponentObserver('image_01'); 
  getOssResizeUrl(originUrl:string|undefined){ 
    let imgWidth: string = ''; 
    let imgHeight: string = ''; 
    let onLayoutComplete:()=>void=():void=> { 
      this.value = JSON.stringify(componentUtils.getRectangleById("image_01")); 
      imgWidth = JSON.parse(this.value).size.width; 
      imgHeight = JSON.parse(this.value).size.height; 
      console.log('[LOG]imageInfo', this.value); 
      console.log('[LOG]imgWidth', imgWidth); 
      console.log('[LOG]imgHeight', imgHeight); 
      this.newUrl = `https://xx.xxx.com/it/u=435134468,xxx&fm=253&fmt=auto&app=120&f=JPEG?w=${imgWidth}&h=${imgHeight}` 
    } 
    let FuncLayout = onLayoutComplete; 
    this.listener.on('layout', FuncLayout); 
  } 
  aboutToAppear() { 
    this.getOssResizeUrl(''); 
  } 
  build() { 
    Column() { 
      Image(this.newUrl) 
        .key("image_01") 
        .id("image_01") 
        .height('300px') 
        .width('300px') 
      Text(this.newUrl) 
    } 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.

2024-08-09 16:51:27

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS如何获取指定子组件的宽高

订阅鸿蒙技术特刊，精选内容抢先看