HarmonyOS 鸿蒙Next 上下有菜单切换功能,中间是嵌套的视频列表使用XComponent,怎么实现视频的横竖屏切换?
HarmonyOS 鸿蒙Next 上下有菜单切换功能,中间是嵌套的视频列表使用XComponent,怎么实现视频的横竖屏切换? 上下有菜单切换功能,中间是嵌套的视频列表使用XComponent,怎么实现视频的横竖屏切换?
开发者您好,视频无法全屏的原因是有上下两个区域的tabBar有高度,导致在横屏时会挤压视频的空间,如果还有问题,可以提供邮箱联系
解决措施:
1、在entry模块的EntryAbility.ets中使用AppStorage来保存是否是横屏全屏状态
AppStorage.setOrCreate('isFullScreen', false)
2、在使用Tabs的地方,如果点击全屏的时候,最外层的tab高度设置为0
// Tabbar.ets
@StorageProp('isFullScreen') isFullScreen: boolean = false
.barHeight(this.isFullScreen ? 0 : '110lpx')
tab里嵌套的tab,点击全屏的时候,里层tab高度和宽度设置为0
// AudioVisualIndex.ets
@StorageProp('isFullScreen') isFullScreen: boolean = false
.barWidth(this.isFullScreen ? 0 :'420lpx')
.barHeight(this.isFullScreen ? 0 :'86lpx')
.scrollable(!this.isFullScreen) // 防止页面滑动
3、在视频设置全屏的地方
// VideoPlayer.ets
将 @State isFullScreen: boolean = false; 替换成 @StorageLink('isFullScreen') isFullScreen: boolean = false
4、设置沉浸式,横屏全屏时,页面没有覆盖到状态栏和导航条,可以根据需要设置沉浸式
setFullScreen(isFullScreen: boolean) {
window.getLastWindow(getContext(this)).then((win) => {
win.setWindowLayoutFullScreen(isFullScreen, (err: BusinessError) => {
const errCode: number = err.code;
if (errCode) {
console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));
return;
}
console.info('Succeeded in setting the window layout to full-screen mode.');
});
}).catch((err: string) => {
console.log('setWindowOrientation: Failed to obtain the top window. Cause: ' + JSON.stringify(err));
});
}
更多关于HarmonyOS 鸿蒙Next 上下有菜单切换功能,中间是嵌套的视频列表使用XComponent,怎么实现视频的横竖屏切换?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next系统中,若要在具有上下菜单切换功能且中间嵌套视频列表的界面中实现视频的横竖屏切换,可以通过以下方式实现:
-
配置Ability的横竖屏支持: 在
config.json
文件中,为对应的Ability配置支持的方向,如portrait
(竖屏)和landscape
(横屏)。确保系统能够识别并允许切换这些方向。 -
监听屏幕方向变化: 使用系统提供的方向变化监听接口,当检测到屏幕方向变化时,调整视频播放器的布局和播放方向。这通常涉及对UI布局的动态调整。
-
视频播放器控制: 利用XComponent提供的视频播放控制接口,根据屏幕方向调整视频播放器的方向。例如,在横屏时可能需要全屏播放,而在竖屏时则可能需要调整播放窗口大小。
-
UI布局调整: 根据屏幕方向变化,动态调整上下菜单和中间视频列表的布局,以确保用户体验的一致性。
通过上述步骤,可以在HarmonyOS鸿蒙Next系统中实现视频的横竖屏切换。如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html 。