用一段文本的宽度变化判断手机的横竖屏状态

利用Text组件的onSizeChange的事件来判断手机的横竖屏状态。

关键点，这个Text组件的宽度要设置成 width('100%')，这样，手机切换横竖屏，宽度就会发生变化，并产生尺寸变化事件。代码如下：

@Entry
@Component
struct WidthChangeCode {
  @State widthOld: string = '0'
  @State widthNew: string = '0'
  @State str1: string = '现在是：竖屏-代码来自 wb98.com' //初始值

  build() {
    Column() {
      Text('Resizable Text')
        .width('100%') //当横竖屏切换时，这个100%宽度设置，就会让宽度尺寸发生变化，并产生相关的 onSizeChange 事件
        .backgroundColor(Color.Yellow)
        .onSizeChange((oldValue, newValue) => {
          this.widthOld = `${oldValue.width}` // 单位默认为vp
          this.widthNew = `${newValue.width}` // 单位默认为vp

          if (Number(this.widthOld) != 0) {
            if (Number(this.widthOld) < Number(this.widthNew)) {
              this.str1 = '现在是：横屏'
            } else {
              this.str1 = '现在是：竖屏'
            }
          }

        })
      Text(this.widthOld).margin(10)
      Text(this.widthNew).margin(10)

      Text(this.str1)

    }
  }
}

打赏 支付宝打赏 微信打赏

来源：济亨网

本文链接：https://wb98.com/post/368.html