HarmonyOS 鸿蒙Next中同等级image和text如何按照text大小来自动匹配image大小,是否可以获取到设置好文案的Text的宽和高

HarmonyOS 鸿蒙Next中同等级image和text如何按照text大小来自动匹配image大小,是否可以获取到设置好文案的Text的宽和高 同等级image和text 如何按照text大小来自动匹配image大小,是否可以获取到设置好文案的Text的宽和高

5 回复

【问题背景】：同一层级中的Image如何根据Text标签组件大小来设置Image的标签组件大小？

【解决思路】：在Text组件中通过onAreaChange回调中获取Text的宽高，然后通过该宽高赋予到对应的Image即可

@State textW: number = 0
@State textH: number = 0

Text('测试')
.onAreaChange((oldValue: Area, newValue: Area) => {
  this.textW = newValue.width;
  this.textH = newValue.height;
})

Image($r('sys.media.notify'))
  .width(this.textW)
  .height(this.textH)

【官方文档——onAreaChange事件说明】

更多关于HarmonyOS 鸿蒙Next中同等级image和text如何按照text大小来自动匹配image大小,是否可以获取到设置好文案的Text的宽和高的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


大概的解决思路

  • 组件区域变化事件onAreaChange会在组件显示的尺寸、位置等发生变化时触发，返回目标元素位置信息变化情况。
  • resizable可以设置图像拉伸时可调整大小的图像选项。拉伸对拖拽缩略图以及占位图有效。

解决方案

通过onAreaChange监听Text的变化，并设置图片组件的resizable属性，设置顶部、右侧、底部、左侧的距离，使其边缘部分在图片拉伸时不会发生变化，仅图片中央区域被拉伸，从而动态调整Image的大小位置等。

@Entry
@Component
struct TextView {
@State textWidth: Length = 0;
@State textHeight: Length = 0;
@State fontSize: number = 16;
build() {
Column({ space: 10 }) {
Button('increase font size')
.onClick(() => {
this.fontSize += 2;
})
Text('这是一个Text')
.fontSize(`${this.fontSize}fp`)
.fontColor(Color.Red)
.onAreaChange((oldValue: Area, newValue: Area) => {
this.textWidth = newValue.width;
this.textHeight = newValue.height;
})
.padding({
left: '5vp',
right: '5vp'
})
Image($r('app.media.imageText'))
.width(this.textWidth)
.resizable({
slice: {
top: '5vp',
right: '5vp',
left: '5vp',
bottom: '5vp'
}
})
}
.height('100%')
.width('100%')
}
}

增大Text文本，图片对应变大。

可以通过MeasureUtils类的measureTextSize方法获取文本的宽度和高度（单位：px）。

示例代码：

import { MeasureUtils, UIContext } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State uiContext: UIContext = this.getUIContext();
  @State measureUtils: MeasureUtils = this.uiContext.getMeasureUtils();
  @State textWidth: number = 0;
  @State textHeight: number = 0;

  aboutToAppear() {
    // 在组件初始化时测量文本尺寸
    let size = this.measureUtils.measureTextSize({
      textContent: "示例文本",
      fontSize: '20px'
    });
    this.textWidth = size.width;
    this.textHeight = size.height;
  }

  build() {
    Row() {
      // Text组件
      Text("示例文本")
        .fontSize('20px')
      
      // Image组件，尺寸根据Text的宽高动态设置
      Image('test.jpg')
        .width(this.textWidth)
        .height(this.textHeight)
    }
  }
}

在HarmonyOS Next中，可通过Text组件的onAreaChange回调获取渲染后的宽高信息。使用Text的width和height属性作为Image组件的布局参数，通过layoutWeight或constraintSize实现自动匹配。具体实现时，将Text测量的尺寸动态绑定至Image的宽高属性即可完成适配。

在HarmonyOS Next中，可以通过以下方式实现同等级Image和Text组件根据Text大小自动匹配Image尺寸，并获取Text的宽高：

  1. 使用Flex布局：将Image和Text放在同一Flex容器中，设置Flex的alignItems属性为FlexAlign.Start或FlexAlign.Center，确保两者对齐。Image的尺寸可以通过layoutWeight或固定宽高与Text关联。

  2. 获取Text的宽高：通过Text组件的onAreaChange回调监听其尺寸变化。示例代码：

    [@State](/user/State) textWidth: number = 0;
[@State](/user/State) textHeight: number = 0;

Text('示例文案')
  .onAreaChange((oldArea, newArea) => {
    this.textWidth = newArea.width;
    this.textHeight = newArea.height;
  })

  3. 动态设置Image尺寸：根据获取的textWidth和textHeight，通过状态变量动态调整Image的宽高。例如：

    Image($r('app.media.icon'))
  .width(this.textWidth * 0.5)  // 按比例调整
  .height(this.textHeight)

完整示例：

@Entry
@Component
struct AdaptiveLayout {
  [@State](/user/State) textWidth: number = 0;
  [@State](/user/State) textHeight: number = 0;

  build() {
    Flex({ direction: FlexDirection.Row, alignItems: FlexAlign.Center }) {
      Image($r('app.media.icon'))
        .width(this.textWidth ? this.textWidth * 0.6 : 0)
        .height(this.textHeight ? this.textHeight : 40)
      Text('动态文案示例')
        .onAreaChange((oldArea, newArea) => {
          this.textWidth = newArea.width;
          this.textHeight = newArea.height;
        })
    }
    .padding(10)
  }
}

此方法利用onAreaChange监听文本区域变化，动态更新图片尺寸，确保布局自适应。

回到顶部