HarmonyOS鸿蒙Next中在运行时动态缩放Text组件，缩放到文本的最小宽度时文本不会跟着缩小

HarmonyOS鸿蒙Next中在运行时动态缩放Text组件，缩放到文本的最小宽度时文本不会跟着缩小

代码如下：父组件的宽度和高度控制在别处的代码里

Stack() {
  Text(this.text)
    .fontSize(this.fontSize)
    .fontColor(this.fontColor)
    .fontStyle(FontStyle.Italic)
    .textAlign(TextAlign.Center)
}.scale({
  x: (this.state.width) / (this.state.initWidth),
  y: (this.state.height) / (this.state.initHeight)
})

效果如下：

text2_compressed.gif


更多关于HarmonyOS鸿蒙Next中在运行时动态缩放Text组件，缩放到文本的最小宽度时文本不会跟着缩小的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

参考下这个demo吧，缩放的时候字体大小也需要乘缩放比例才能对应随着缩放

@Entry
@ComponentV2
struct Index {
  @Local message: string = 'Hello World';
  @Local scaleValue: number = 1;
  @Local fontSize: number = 50
  @Local textWidth: number = this.getUIContext().getMeasureUtils().measureText({
    textContent: "Hello word",
    fontSize: this.fontSize
  })

  build() {
    Flex() {
      Text(this.message)
        .fontSize(this.fontSize)
        .fontWeight(FontWeight.Bold)
        .scale({ x: this.scaleValue, y: this.scaleValue })
        .border({ width: 1 })

      Image($r("app.media.scale"))
        .width(20 * this.scaleValue)
        .alignSelf(ItemAlign.End)
        .offset({
          y: 20 * this.scaleValue,
        })
        .gesture(
          PanGesture()
            .onActionStart((event: GestureEvent) => {
            })
            .onActionUpdate((event: GestureEvent) => {
              if (event) {
                this.scaleValue = (this.textWidth + event.offsetX) / this.textWidth
                this.fontSize *= this.scaleValue
              }
            })
            .onActionEnd((event: GestureEvent) => {
            })
        )
    }
  }
}

更多关于HarmonyOS鸿蒙Next中在运行时动态缩放Text组件，缩放到文本的最小宽度时文本不会跟着缩小的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


不行啊，跟外部的边框的大小缩放时不成比例啊。缩小的时候没啥问题，但是放大的时候，放大相同的倍数，文字的宽度会超过父组件的宽度。

我想到了，可以这样判断下： `Text(this.state.text)`
`.fontSize(this.state.fontSize < this.getScaleFontSize() ? this.state.fontSize : this.getScaleFontSize())`，当大于原来的字体时用原来的字体，

静态写死scale值时字体就会跟着缩小，动态改变scale值就不行

cke_967.png

cke_1475.png

工单老是答非所问，

能提供下完整点的demo吗

Text(‘Hello World’) .fontSize(50) .fontWeight(‘Bold’) .scale({ x: this.scaleValueX, y: this.scaleValueY }) .gesture( PinchGesture() .onActionStart(() => { this.scaleValue = this.scaleCurrent }) .onActionUpdate((event: GestureEvent) => { if (event) { this.scaleCurrent = this.scaleValue * event.scale } }) )

RelativeContainer() .width(this.heightValue > 0 ? this.heightValue : “”) .height(this.heightValue > 0 ? this.heightValue : “”) .alignRules({ ‘top’: { ‘anchor’: ‘container’, ‘align’: ‘Bottom’ }, ‘right’: { ‘anchor’: ‘container’, ‘align’: ‘End’ } }) .offset({ x: 8, y: -8, }) .zIndex(10) .responseRegion({ x: 0, y: 0, width: ‘150%’, height: ‘150%’ }) .onTouch((event: TouchEvent) => { event.stopPropagation() if (event.type === ‘Down’) { this.touchPoint.x = event.touches[0].windowX this.touchPoint.y = event.touches[0].windowY this.touchWidth = this.widthValue; this.touchHeight = this.heightValue return } if (event.type === ‘Move’) { this.widthValue = this.touchWidth + (event.touches[0].windowX - this.touchPoint.x) this.heightValue = this.touchHeight + (event.touches[0].windowY - this.touchPoint.y) return } if (event.type === ‘Up’) { return } })

Image($r(“app.media.scale”)) .backgroundColor(‘White’) .width(20) .autoResize(true) .aspectRatio(1) .padding(3) .borderRadius(20)

在HarmonyOS鸿蒙Next中，动态缩放Text组件时，如果缩放到文本的最小宽度，文本不会跟随缩小。这是因为Text组件的最小宽度默认由其内容决定，当达到最小宽度时，文本会自动换行或截断，而不是继续缩小。要解决这个问题，可以通过设置Text组件的minWidth属性为0，并配合flexShrink属性，使文本在达到最小宽度时继续缩小。例如：

Text()
  .width('100%')
  .minWidth(0)
  .flexShrink(1)
  .text('动态缩放文本')

这样，文本在达到最小宽度后会继续缩小，而不是换行或截断。

在HarmonyOS鸿蒙Next中，Text组件在动态缩放时，如果缩放到文本的最小宽度，文本不会自动缩小。这是因为系统默认保留了文本的可读性，防止过度缩小导致内容无法识别。要实现文本随组件缩小，可以通过设置Text的autoScale属性为true，并调整minFontSize属性来控制最小字体大小。例如：

Text()
  .autoScale(true)
  .minFontSize(10)
  .onAreaChange((oldValue, newValue) => {
    // 动态调整文本大小
  })

这样可以确保文本随组件缩放，同时保持可读性。

回到顶部