当前位置:首页 » 程序代码 » 正文

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

利用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://www.wb98.com/post/368.html

鸿蒙  arkts  
    << 上一篇 下一篇 >>

    湘公网安备 43011102000514号 - 湘ICP备08100508号