##鸿蒙开发能力 ##HarmonyOS SDK应用服务##鸿蒙金融类应用 (金融理财#
一、鸿蒙应用如何进行页面横竖屏调用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) // 去注册回调