wdcp网站无法访问,如何设计一个网页页面,章贡区综合网站建设商家,wordpress 4.0 中文版【HarmonyOS】鸿蒙应用如何进行页面横竖屏切换以及注意事项#xff0c;自动切换横竖屏#xff0c;监听横竖屏
一、鸿蒙应用如何进行页面横竖屏调用API手动切换
1.首先要在EntryAbility 中获取主窗口对象 EntryAbility.ets
import { AbilityConstant, UIAbility, Want } fr…【HarmonyOS】鸿蒙应用如何进行页面横竖屏切换以及注意事项自动切换横竖屏监听横竖屏
一、鸿蒙应用如何进行页面横竖屏调用API手动切换
1.首先要在EntryAbility 中获取主窗口对象 EntryAbility.ets
import { AbilityConstant, UIAbility, Want } from kit.AbilityKit;
import { window } from kit.ArkUI;export default class EntryAbility extends UIAbility {onWindowStageCreate(windowStage: window.WindowStage): void {// 挂载globalThis上可以当全局对象使用。当然此处实现方式因人而异你可以放在单例里或者localstore中等等globalThis.windowClass windowStage.getMainWindowSync();windowStage.loadContent(pages/RotationTestPage, (err) {if (err.code) {return;}});}
}
之后在需要调用横竖屏切换的页面或者逻辑中调用我这里用按钮触发举例 RotationTestPage.ets
import { BusinessError } from kit.BasicServicesKit;
import { window } from kit.ArkUI;Entry
Component
struct RotationTestPage {private TAG: string RotationTestPage;onClickRotation (){// 设置横竖屏状态let orientation window.Orientation.LANDSCAPE;try{globalThis.windowClass.setPreferredOrientation(orientation, (err: BusinessError) {if(err.code){console.error(this.TAG, Failed to set window orientation. Cause: JSON.stringify(err));return;}console.info(this.TAG,Succeeded in setting window orientation.);});}catch (exception) {console.error(this.TAG,Failed to set window orientation. Cause: JSON.stringify(exception));}}build() {RelativeContainer() {Text(点击切换为横屏).id(RotationTestPageHelloWorld).fontSize(50).fontWeight(FontWeight.Bold).alignRules({center: { anchor: __container__, align: VerticalAlign.Center },middle: { anchor: __container__, align: HorizontalAlign.Center }}).onClick(this.onClickRotation)}.height(100%).width(100%)}
}window.Orientation具体数值参见以下网址
注意 设置主窗口的显示方向属性。仅在支持跟随sensor旋转的设备上生效子窗口调用后不生效。
二、如何实现应用的屏幕自动旋转
在module.json5添加属性orientation: “auto_rotation”。
abilities: [ { name: EntryAbility, srcEntry: ./ets/entryability/EntryAbility.ets, description: $string:EntryAbility_desc, icon: $media:icon, label: $string:EntryAbility_label, startWindowIcon: $media:startIcon, startWindowBackground: $color:start_window_background, exported: true, skills: [ { entities: [ entity.system.home ], actions: [ action.system.home ] } ], orientation: auto_rotation, // 随传感器旋转 }
]注意 auto_rotation随传感器旋转 需要在系统下滑菜单中放开自动锁定状态才可生效。
三、如何监听屏幕旋转
使用媒体查询接口监听屏幕旋转
import { mediaquery } from kit.ArkUI;
let listener mediaquery.matchMediaSync((orientation: landscape)); // 监听横屏事件
function onPortrait(mediaQueryResult: mediaquery.MediaQueryResult) { if (mediaQueryResult.matches) { // do something here } else { // do something here }
}
listener.on(change, onPortrait) // 注册回调
listener.off(change, onPortrait) // 去注册回调
