Ionic4安卓沉浸式状态栏设置,华为机型无效解决方法

首先安装statusBar插件,本次使用插件statusBar版本2.4.2
https://github.com/apache/cordova-plugin-statusbar
Ionic4中IOS自动适配沉浸式状态栏,安卓需要在代码中开启:
app.component.ts构造方法中增加 this.statusBar.overlaysWebView(true);

...
constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // 增加代码开始
      this.statusBar.overlaysWebView(true);//设置webView全屏覆盖,实现沉浸式状态栏
      // 增加代码结束
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }
...

设置后真机运行发现安装状态栏和页面导航调重叠,如图:
在这里插入图片描述

在global.scss中单独设置安卓safe area top的高度

/*设置安卓安全区域top高度 预留出状态栏区域*/
:root {
    .md{
      --ion-safe-area-top: 32px;
    }
}

safe area可设置顶部、底部、左、右,可根据实际情况设置,设置完后真机运行如图:
在这里插入图片描述
以上配置在大多数机型可实现沉浸式状态栏,但在华为机型上无效果,查询后发现需要修改控件源码
插件目录下 \plugins\cordova-plugin-statusbar\src\android\StatusBar.java文件59行增加以下内容

	...
	Window window = cordova.getActivity().getWindow();
	// 增加代码开始
	window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
    window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
    window.setStatusBarColor(Color.TRANSPARENT);
    window.setNavigationBarColor(Color.TRANSPARENT);
	//增加代码结束
    window.clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
	...

以上可实现华为机型沉浸状态栏,但还有问题,如果手机开启了虚拟按键,按键和页面区域重叠,继续研究StatusBar.java
229行 setStatusBarTransparent方法中增加以下内容

	window.setStatusBarColor(Color.TRANSPARENT);
	// 增加代码开始
	window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
	//增加代码结束

真机运行,华为机型完美适配。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
1. 鸿蒙平台应用程序开发技术 鸿蒙是华为公司自主研发的操作系统,也是一款新兴的移动平台。鸿蒙平台应用程序开发技术主要包括以下几个方面: (1)应用程序开发语言:鸿蒙平台支持多种开发语言,如C、C++、Java、JavaScript等,其中Java是最常用的开发语言。 (2)开发工具:鸿蒙平台提供了一套完整的开发工具链,包括开发工具IDE、SDK、模拟器等,开发者可以使用这些工具来开发应用程序。 (3)应用程序开发框架:鸿蒙平台提供了一套完整的开发框架,包括UI框架、数据存储框架、网络通信框架等,开发者可以使用这些框架来快速开发应用程序。 2. 采用Web技术开发移动应用程序的方法 采用Web技术开发移动应用程序的方法主要包括以下几个方面: (1)HTML5、CSS3和JavaScript技术:HTML5、CSS3和JavaScript是Web开发的三大核心技术,可以用来开发丰富的用户界面和交互效果。 (2)移动Web开发框架:移动Web开发框架可以帮助开发者快速构建Web应用程序,常用的框架有jQuery Mobile、Sencha Touch、Ionic等。 (3)Hybrid开发技术:Hybrid开发技术是将Web技术与原生应用程序开发技术相结合的一种开发方,可以充分发挥Web技术的优势,同时也可以实现原生应用程序的功能。 (4)Web App:Web App是一种基于Web技术开发的应用程序,具有跨平台、可更新、低成本等优势,但也存在性能、用户体验等方面的问题。 总的来说,鸿蒙平台应用程序开发技术和采用Web技术开发移动应用程序的方法都是当前移动应用程序开发的主流技术,开发者可以根据自身需求和技术能力选择适合的开发方

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值