開源項目 OpenHarmony是每個人的 OpenHarmony

徐建國(堅果)
江蘇潤開鴻數字科技有限公司 生態技術專家
前言
在日常開發中,大多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 參數:
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';
struct Index {
string = '橫豎屏切換 '
message: boolean = true
portrait: 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';
struct Index {
string = '橫豎屏切換 '
message: boolean = true
portrait: 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 參數:


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
參數:


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';
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】歡迎添加關注!文章轉載請注明出處。
-
鴻蒙
+關注
關注
59文章
2532瀏覽量
43790 -
OpenHarmony
+關注
關注
27文章
3835瀏覽量
18179
原文標題:OpenHarmony如何切換橫豎屏?
文章出處:【微信號:gh_e4f28cfa3159,微信公眾號:OpenAtom OpenHarmony】歡迎添加關注!文章轉載請注明出處。
發布評論請先 登錄
泰克示波器MSO58B光標橫豎切換操作指南與實用技巧

OpenHarmony5.0系統怎么去除鎖屏直接進入界面?教你2步搞定

OpenHarmony程序分析框架論文入選ICSE 2025

OpenHarmony默認30秒熄屏太麻煩?觸覺智能鴻蒙開發板教你輕松取消

貝啟科技亮相OpenHarmony人才生態大會2024
OpenHarmony人才生態大會南向生態社區發展論壇在武漢圓滿舉辦
OpenHamrony4.0去除鎖屏是一種什么體驗?觸覺智能給你支支招

第三屆OpenHarmony技術大會星光璀璨、致謝OpenHarmony社區貢獻者
OpenHarmony年度技術俱樂部、個人及活動評選結果公示
【龍芯2K0300蜂鳥板試用】OpenHarmony代碼
基于ArkTS語言的OpenHarmony APP應用開發:HelloOpenharmony

基于ArkTS語言的OpenHarmony APP應用開發:HelloOpenharmony
河南大學OpenHarmony技術俱樂部正式揭牌成立

電源切換芯片怎么設置
鴻蒙開發系統基礎能力:ohos.screenLock 鎖屏管理

評論