Ionic中如何设置页面横屏和全屏_ionic 如何设置横屏-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_38299362/article/details/79672163

本文介绍了一种在Ionic应用中实现全屏和横屏显示的方法。通过使用statusbar插件隐藏状态栏来达到全屏效果，利用screenorientation插件实现横屏功能。文中提供了具体的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在工作过程中，比如做视频播放器的时候，肯定是需要让页面横屏，甚至全屏的，那么该用什么办法实现这些功能呢？

一般查资料，大家都说用官网的full screen插件，但是这个插件android和iso是不通用的，这样代码维护起来就比较难，于是我采用了另外一种方法，下面给大家介绍下。

第一步：实现全屏功能。

没有用官方说的full screen插件，其实全屏就是把状态栏给隐藏掉就行了，于是采用了取巧的方法，用的status bar插件，把状态栏隐藏就可以了。

新建ionic程序时status bar插件已经引入工程中了，如果没有引入，可以用下面的命令行引入。

ionic cordova plugin add cordova-plugin-statusbar
npm install --save @ionic-native/status-bar

在app.module.ts文件中引入该插件。

import { StatusBar } from '@ionic-native/status-bar';

providers: [
    StatusBar
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]

在需要隐藏状态栏的页面中，也引入该插件，并在构造函数中创建对象，并调用hide方法。

import { StatusBar } from '@ionic-native/status-bar';

constructor(public navCtrl: NavController,
    public navParams: NavParams,
    public statusBar: StatusBar) {
      this.statusBar.hide();
  }

第二步：实现页面横屏的功能。

用的官方的screen orientation插件，用完这个插件后，用浏览器调试会出错，不过没关系，在真机或模拟器上调试就没问题了，还能达到预期的效果。

通过命令行引入该插件

ionic cordova plugin add cordova-plugin-screen-orientation
npm install --save @ionic-native/screen-orientation

在app.module.ts文件中引入该插件。

import { ScreenOrientation } from '@ionic-native/screen-orientation';

providers: [
    ScreenOrientation,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]

加上状态栏隐藏的代码，整个实现的代码如下：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ScreenOrientation } from '@ionic-native/screen-orientation';
import { StatusBar } from '@ionic-native/status-bar';
 
@IonicPage()
@Component({
  selector: 'page-video',
  templateUrl: 'video.html',
})
export class VideoPage {
 
  constructor(public navCtrl: NavController,
    public navParams: NavParams,
    public screenOrientation: ScreenOrientation,
    public statusBar: StatusBar) {
      this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
      this.statusBar.hide();
  }
}

但是发现了一个BUG，程序打开后，按返回键后，程序再进入就不能是横屏的了，目前还没找到程序方法，只能杀死进程才可以，有没有谁知道解决方法？

如果觉得写的不错，可以打赏哦，您的支持是我一直努力的动力！