0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

OpenHarmony如何切换横竖屏?

OpenAtom OpenHarmony 来源:未知 2023-01-18 02:25 次阅读

开源项目 OpenHarmony是每个人的 OpenHarmony 9579cde2-9692-11ed-bfe3-dac502259ad0.png

徐建国(坚果)

江苏润开鸿数字科技有限公司 生态技术专家

前言

在日常开发中,大多APP可能根据实际情况直接将APP的界面方向固定,或竖屏或横屏。但在使用过程中,我们还是会遇到横竖屏切换的功能需求,可能是通过物理重力感应触发,也有可能是用户手动触发。所以本文主要带大家了解在OpenAtom OpenHarmony(以下简称“OpenHarmony”)应用开发的过程中,如何在Stage模型和FA模型下使用对应的接口去完成横竖屏的切换。 本文中OpenHarmony版本为3.2 Beta4,API版本为9。开发板为DAYU200。

FA模型

FA模型下,setDisplayOrientation和setDisplayOrientation是切换横竖屏的接口。

文档:

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/js-apis-inner-app-context.md#contextsetdisplayorientation7

context.setDisplayOrientation setDisplayOrientation(orientation: bundle.DisplayOrientation, callback: AsyncCallback): void 设置当前能力的显示方向(callback形式)。 系统能力: SystemCapability.Ability.AbilityRuntime.Core 参数95a190e8-9692-11ed-bfe3-dac502259ad0.png   示例:
import featureAbility from '@ohos.ability.featureAbility';
import bundle from '@ohos.bundle';
//FA模型下获取context
var context = featureAbility.getContext();
var orientation = bundle.DisplayOrientation.UNSPECIFIED;
context.setDisplayOrientation(orientation, (err) => {
    console.info("setDisplayOrientation err: " + JSON.stringify(err));
});
完整代码
import bundle from '@ohos.bundle';
import featureAbility from '@ohos.ability.featureAbility';
@Entry
@Component
struct Index {
  @State message: string = '横竖屏切换 '
  @State portrait: boolean = true


  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(30)
          .fontWeight(FontWeight.Bold).onClick(() => {
          var context = featureAbility.getContext();
          if (this.portrait) {


            // 横屏
            var orientation = bundle.DisplayOrientation.LANDSCAPE;
            context.setDisplayOrientation(orientation, (err) => {
              this.portrait = !this.portrait
              console.info("setDisplayOrientation err: " + JSON.stringify(err));
            });
          } else {
            //竖屏
            var orientation = bundle.DisplayOrientation.PORTRAIT;
            context.setDisplayOrientation(orientation, (err) => {
              this.portrait = !this.portrait
              console.info("setDisplayOrientation err: " + JSON.stringify(err));
            });      
          }
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}
上面这样写太乱了,我们可以封装一下:
import bundle from '@ohos.bundle';
import featureAbility from '@ohos.ability.featureAbility';
@Entry
@Component
struct Index {
  @State message: string = '横竖屏切换 '
  @State portrait: boolean = true


  private changePortrait() {
    var context = featureAbility.getContext();
    if (this.portrait) {
      // 横屏
      var orientation = bundle.DisplayOrientation.LANDSCAPE;
      context.setDisplayOrientation(orientation, (err) => {
        this.portrait = !this.portrait
        console.info("setDisplayOrientation err: " + JSON.stringify(err));
      });
    } else {
      //竖屏
      var orientation = bundle.DisplayOrientation.PORTRAIT;
      context.setDisplayOrientation(orientation, (err) => {
        this.portrait = !this.portrait
        console.info("setDisplayOrientation err: " + JSON.stringify(err));
      });


    }


  }


  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(30)
          .fontWeight(FontWeight.Bold).onClick(() => {
this.changePortrait()
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

Stage模型

从API 9开始,可以使用setPreferredOrientation来切换横竖屏。

文档:

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/js-apis-window.md#setpreferredorientation9

在Stage模型中,使用到的主要是Window(窗口)。在设置横竖屏切换的时候,需要先使用getLastWindow()、createWindow()、findWindow()中的任一方法获取到Window实例,再通过此实例调用对应的方法,本文使用的是getLastWindow。 Window.getLastWindow getLastWindow(ctx: BaseContext): Promise获取当前应用内最后显示的窗口,使用Promise异步回调。 系统能力: SystemCapability.WindowManager.WindowManager.Core 参数:95cba716-9692-11ed-bfe3-dac502259ad0.png   返回值:95d47fa8-9692-11ed-bfe3-dac502259ad0.png   错误码: 以下错误码的详细介绍请参见窗口错误码。95fa15f6-9692-11ed-bfe3-dac502259ad0.png
let windowClass = null;
try {
    let promise = window.getLastWindow(this.context);
    promise.then((data)=> {
        windowClass = data;
        console.info('Succeeded in obtaining the top window. Data: ' + JSON.stringify(data));
    }).catch((err)=>{
        console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err));
    });
} catch (exception) {
    console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(exception));
}
然后就可以使用setPreferredOrientation属性。 setPreferredOrientation setPreferredOrientation(orientation: Orientation): Promise 设置窗口的显示方向属性,使用Promise异步回调。 系统能力: SystemCapability.WindowManager.WindowManager.Core 参数:9610352a-9692-11ed-bfe3-dac502259ad0.png   返回值:963309f6-9692-11ed-bfe3-dac502259ad0.png   错误码: 以下错误码的详细介绍请参见窗口错误码。96482ffc-9692-11ed-bfe3-dac502259ad0.png
let orientation = window.Orientation.AUTO_ROTATION;
try {
    let promise = windowClass.setPreferredOrientation(orientation);
    promise.then(()=> {
        console.info('Succeeded in setting the window orientation.');
    }).catch((err)=>{
        console.error('Failed to set the window orientation. Cause: ' + JSON.stringify(err));
    });
} catch (exception) {
    console.error('Failed to set window orientation. Cause: ' + JSON.stringify(exception));
}
完整代码
importWindowfrom'@ohos.window'
import common from '@ohos.app.ability.common';
@Entry
@Component
struct ArkUIClubTest {
  private portrait: boolean = true
  build() {
    Stack() {
      Button("横竖屏切换")
        .onClick(() => {
          this.changeOrientation()
        })
    }
    .width('100%')
    .height('100%')
  }
  private changeOrientation() {
    let windowClass = null;
    //获取上下文
    //var context = getContext(this) as any
    // 获取上下文,使用common模块
     var context =   getContext(this) as common.UIAbilityContext;
    let promise = Window.getLastWindow(context);
    promise.then((data) => {
      windowClass = data;
      if (this.portrait) {
        //切换成横屏
        let orientation = Window.Orientation.LANDSCAPE;
        windowClass.setPreferredOrientation(orientation, (err) => {
       });
        this.portrait = !this.portrait
        console.info('Succeeded in obtaining the top window. Data: ' + JSON.stringify(data));
      }
      else {
        //切换成竖屏
        let orientation = Window.Orientation.PORTRAIT;
        windowClass.setPreferredOrientation(orientation, (err) => {
        });
        this.portrait = !this.portrait
        console.info('Succeeded in obtaining the top window. Data: ' + JSON.stringify(data));
      }
    }).catch((err) => {
      console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err));
    });
  }
}

总结

本文带大家使用对应的接口,在Stage模型和FA模型下完成了横竖屏的切换。其中还涉及到了上下文的获取:Stage模型用(getContext(this) as any),FA模型(featureAbility.getContext()),大家可以在此基础上利用生命周期的回调,在合适的地方完成对应的操作。


原文标题:OpenHarmony如何切换横竖屏?

文章出处:【微信公众号:OpenAtom OpenHarmony】欢迎添加关注!文章转载请注明出处。


声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 鸿蒙
    +关注

    关注

    57

    文章

    2347

    浏览量

    42829
  • OpenHarmony
    +关注

    关注

    25

    文章

    3718

    浏览量

    16295

原文标题:OpenHarmony如何切换横竖屏?

文章出处:【微信号:gh_e4f28cfa3159,微信公众号:OpenAtom OpenHarmony】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    OpenHarmony默认30秒熄太麻烦?触觉智能鸿蒙开发板教你轻松取消

    OpenHarmony系统开机后 30 秒会自动息,教大家两招轻松取消自动息,触觉智能Purple Pi OH鸿蒙开发板演示,已适配全新OpenHarmony5.0 Release
    的头像 发表于 12-09 11:45 207次阅读
    <b class='flag-5'>OpenHarmony</b>默认30秒熄<b class='flag-5'>屏</b>太麻烦?触觉智能鸿蒙开发板教你轻松取消

    贝启科技亮相OpenHarmony人才生态大会2024

    ,超高清多路拼接显示,工业控制等,吸引了众多参展者的目光。与此同时,在贝启科技的展台前,前来了解产品详情、寻求合作机会的观众络绎不绝。此次大会聚焦技术交流与生态发展,贝启科技作为OpenHarmony生态的重要成员,全程参与并贡献力量。
    的头像 发表于 11-29 16:00 163次阅读

    第三届OpenHarmony技术大会星光璀璨、致谢OpenHarmony社区贡献者

    10月12日,在上海举办的第三届OpenHarmony技术大会上,32家高校OpenHarmony技术俱乐部璀璨亮相,30家高校OpenHarmony开发者协会盛大启幕。还分别致谢了年度星光TSG
    的头像 发表于 10-21 14:10 214次阅读

    基于ArkTS语言的OpenHarmony APP应用开发:HelloOpenharmony

    1、程序简介该程序是基于OpenHarmony标准系统编写的UI应用类:HelloOpenHarmony。本案例是基于API9接口开发。本案例已在OpenHarmony凌蒙派-RK3568开发
    的头像 发表于 09-15 08:09 380次阅读
    基于ArkTS语言的<b class='flag-5'>OpenHarmony</b> APP应用开发:Hello<b class='flag-5'>Openharmony</b>

    基于ArkTS语言的OpenHarmony APP应用开发:HelloOpenharmony

    Studio提供远程模拟器和本地模拟器。 6.1、本地模拟器 点击右侧栏中的\"Previewer\",可以查看ArkUI运行结果。 程序运行结果如下所示: 注意:如果发现界面是横竖不对
    发表于 09-14 12:47

    鸿蒙开发系统基础能力:ohos.screenLock 锁管理

    管理服务是OpenHarmony中系统服务,为锁应用提供注册亮、灭、开启屏幕、结束休眠、退出动画、请求解锁结果监听,并提供回调结果
    的头像 发表于 06-27 11:41 706次阅读
    鸿蒙开发系统基础能力:ohos.screenLock 锁<b class='flag-5'>屏</b>管理

    鸿蒙开发接口资源管理:【@ohos.resourceManager (资源管理)】

    资源管理模块,根据当前configuration(语言,区域,横竖,mccmnc)和device capability(设备类型,分辨率)提供获取应用资源信息读取接口。
    的头像 发表于 06-03 15:10 1124次阅读
    鸿蒙开发接口资源管理:【@ohos.resourceManager (资源管理)】

    求助,关于STM32F429I-EVAL评估板横切换问题求解

    最近使用的STM32429I-EVAL评估板做个项目调研,系统4.3的显示可以由横切换。结果试验了两天也没有解决?通过宏定义可以实现X和y镜像。但是Xy交换不了。直接没有显示。
    发表于 05-10 06:00

    九联开鸿加入开放原子开源基金会OpenHarmony医疗健康专委会

    近日,九联开鸿加入开放原子开源基金会OpenHarmony医疗健康专委会,将与医疗行业伙伴合作开发基于OpenHarmony系统的智慧医疗产品以及智慧病房解决方案,完成包括床头、走廊
    的头像 发表于 04-18 09:46 458次阅读
    九联开鸿加入开放原子开源基金会<b class='flag-5'>OpenHarmony</b>医疗健康专委会

    stm32f429 emwin切换窗口闪的原因?

    我这里GUI初始化的时候全屏都初始化了,但是用的时候只用了右半边,左半边显示的是摄像头的图像,现在是只要切换右半的页面摄像头这边就会闪,不知道是什么问题。
    发表于 04-18 06:51

    OpenHarmony南向开发案例:【智能中控

    基于Hi3516开发板,使用开源OpenHarmony开发的应用。通过控制面板可以控制同一局域网内的空调,窗帘,灯等智能家居设备。
    的头像 发表于 04-17 16:12 385次阅读
    <b class='flag-5'>OpenHarmony</b>南向开发案例:【智能中控<b class='flag-5'>屏</b>】

    OpenHarmony南向能力征集令

    1、适配过程中缺少哪些接口能力或者南向能力,需要OpenHarmony去补齐的?例如内核、编译、器件适配、单板适配等; 2、对标linux,需要OpenHarmony提供哪些能力?比如V4L2
    发表于 04-09 15:32

    OpenHarmony内核编程实战

    编程入门[Hello,OpenHarmony]在正式开始之前,对于刚接触OpenHarmony的伙伴们,面对大篇幅的源码可能无从下手,不知道怎么去编码写程序,下面用一个简单的例子带伙伴们入门。▍任务
    的头像 发表于 03-27 08:31 816次阅读
    <b class='flag-5'>OpenHarmony</b>内核编程实战

    浅谈兼容 OpenHarmony 的 Flutter

    OpenHarmony SIG 组织在 Gitee 开源了兼容 OpenHarmony 的 Flutter。该组织主要用于孵化 OpenHarmony 相关的开源生态项目。     ▲ 仓库地址
    的头像 发表于 02-02 15:22 611次阅读
    浅谈兼容 <b class='flag-5'>OpenHarmony</b> 的 Flutter

    无缝高清矩阵切换器和传统的矩阵切换器有什么区别?

    无缝高清矩阵切换器和传统的矩阵切换器在多个方面存在显著差异。 切换效果:无缝高清矩阵切换器在切换信号时不会出现黑屏、蓝屏、闪
    的头像 发表于 01-24 14:38 494次阅读