HarmonyOS 鸿蒙Next文字缩放

HarmonyOS 鸿蒙Next文字缩放

@Entry
@Component
struct Index {
  @State boxWidth: number = 180

  build() {
    Column({ space: 28 }) {
      Text('拖动滑动条改变盒子宽度')
        .fontSize(18)
        .fontWeight(FontWeight.Medium)
        .fontColor('#11141A')

      Slider({
        value: this.boxWidth,
        min: 100,
        max: 320,
        step: 1,
        style: SliderStyle.OutSet
      })
        .width('80%')
        .onChange((value: number) => {
          this.boxWidth = value
        })

      Row() {
        Image($r('app.media.startIcon'))
          .width(30)
          .aspectRatio(1)
          .margin({right:4})
        Text('宽度变化文字自适应')
          .fontColor('#FFFFFF')
          .fontWeight(FontWeight.Medium)
          .maxFontSize(24)
          .minFontSize(10)
          .maxLines(1)
          .flexShrink(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
      }
      .width(this.boxWidth)
      .height(80)
      .padding({ left: 12, right: 12 })
      .backgroundColor('#3377FF')
      .borderRadius(12)
      .justifyContent(FlexAlign.Center)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .backgroundColor('#F7F8FA')
  }
}