[ArkUI开发技巧] 应用的全屏式沉浸适配

news2024/12/23 6:12:17

引言

在开发应用的过程中,为了使用户聚焦在应用本身,最好对应用进行沉浸适配。先前有一种适配方法,将SystemBarProperties设置成应用页面顶部和底部的颜色,但是这种方法在切换页面的过程中过渡十分僵硬,且应用在小窗模式下切换页面会强制全屏,因此不太尽如人意。本文将介绍一种优化过的方法,实现应用的沉浸适配。

原理

通过将应用样式设置为全屏,将SystemBarProperties背景设置为透明,contentColor随页面变化实现沉浸效果

代码实现

  • 页面的代码调整

为实现沉浸后,应用内容不入侵状态栏,需要给状态栏预留空间。因此,需要将页面最外层且设置了颜色的容器组件的padding.top设置为原有值+36(具体值随不同设备类型可能有变化,但36为phone形态设备的建议值)

@Entry
@Component
struct Page {
  build() {
    Column() {
      Text("Hello World!")
    }
    .padding({top: 36})
    .backgroundColor(Color.White)
  }
}
额外建议

考虑到用户不一定使用手势导航,底部TabBar最好也预留空间

  • Utils的编写

为了简化代码,提高复用率,我们应该编写一个沉浸Utils类来控制,代码如下:

// This file is part of libNMC, which is the foundation of ohos-weather.
// Copyright (C) 2023  Tingjin<dev@peercat.cn>
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program.  If not, see <https://www.gnu.org/licenses/>.
import window from '@ohos.window';

export class ImmersiveUtils {
  public static immersive(windowStage: window.WindowStage, config: {
    barColor: string,
    contentColor: string,
    navigationColor: string,
    navigatorColor: string
  }) {
    windowStage.getMainWindow()
      .then(win => {
        win.setWindowSystemBarProperties({
          statusBarColor: config.barColor,
          statusBarContentColor: config.contentColor,
          navigationBarColor: config.navigationColor,
          navigationBarContentColor: config.navigatorColor
        });
      })
  }
}

代码来自于我的开源项目ohos-weather

config包含了SystemBarProperties属性信息,用本方法时,一般将barColor和navigationColor设置为#00ffffff,即透明,根据应用背景色来调整contentColor和navigatorColor

  • EntryAbility的修改

在EntryAbility的onWindowStageCreate回调中,我们需要添加

globalThis.windowStage = windowStage;
windowStage.getMainWindow()
        .then(win => {
          win.setWindowLayoutFullScreen(true);
        })
  • 实现沉浸

最后即可实现沉浸,在页面onPageShow生命周期回调中,使用如下代码实现沉浸

ImmersiveUtils.immersive(globalThis.windowStage, StyleConstant.IMMERSIVE_CONFIG.INDEX);

其中第二个参数应根据你应用的实际情况进行修改,在ohos-weather中,StyleConstant.IMMERSIVE_CONFIG.INDEX的内容如下

INDEX: {
      barColor: "#00286098",
      contentColor: "#ffffff",
      navigationColor: "#005d99d6",
      navigatorColor: "#ffffff"
    }

随着鸿蒙生态的发展,鸿蒙开发已成为时代新风口,学习鸿蒙开发势在必行

为了能让大家更好的学习鸿蒙 (Harmony OS) 开发技术,这边特意整理了《鸿蒙 (Harmony OS)开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05

《鸿蒙 (Harmony OS)开发学习手册》

入门必看:https://qr21.cn/FV7h05

  1. 应用开发导读(ArkTS)
  2. ……

HarmonyOS 概念:https://qr21.cn/FV7h05

  1. 系统定义
  2. 技术架构
  3. 技术特性
  4. 系统安全

如何快速入门?:https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. 构建第一个JS应用
  4. ……

开发基础知识:https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发:https://qr21.cn/FV7h05

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1368930.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据结构实验3:顺序表的基本操作

目录 一、实验目的 二、实验原理 1. 连续存储空间 2. 元素访问 3. 固定大小 4. 容量管理 5. 动态顺序表 6. 顺序表的插入 7. 顺序表的删除 8. 顺序表的应用 三、实验内容 问题描述 代码 截图 分析 一、实验目的 1、 熟练掌握顺序表结构体的实现。 2、 熟练掌握…

记录汇川:ITP与Autoshop进行仿真连接

1、定义如下程序&#xff1a; 2、ITP新建工程&#xff1a; 3、依次选择&#xff0c;最后修改IP 4、定义两个变量 5、拖一个按钮和一个圈出来&#xff0c;地址绑定&#xff1a;M1 6、地址绑定&#xff1a;Y1 7、PLC启动仿真 8、ITP启动在线模拟器 9、即可实现模拟仿真

Redis 配置(二)

目录 redis 配置 Redis 主从复制 主从复制的作用 主从复制流程 搭建Redis 主从复制 Redis 哨兵模式 哨兵模式的作用 哨兵结构 故障转移机制 主节点的选举 搭建Redis 哨兵模式 Redis 群集模式 集群的作用 Redis集群的数据分片 Redis集群的主从复制模型 搭建R…

拓数派加入 OpenCloudOS 操作系统开源社区,作为成员单位参与社区共建

近日&#xff0c;拓数派签署 CLA(Contributor License Agreement 贡献者许可协议)&#xff0c;正式加入 OpenCloudOS 操作系统开源社区。 拓数派&#xff08;英文名称“OpenPie”&#xff09;是国内基础数据计算领域的高科技创新企业。作为国内云上数据库和数据计算领域的引领者…

CentOS7部署GitLab-ce-16.7.0-ce.0.el7

文章目录 下载地址上传服务器安装访问配置external_url修改防火墙端口开放 重新加载配置访问GitLab出现502访问错误继续访问gitlab账户和密码修改GitLab常用命令 下载地址 gitlab 下载地址 上传服务器 scp -r C:\Users\xxx.xxxx\Downloads\gitlab-ce-16.7.0-ce.0.el7.x86_64…

黑马苍穹外卖学习Day3

目录 公共字段自动填充问题分析实现思路代码实现 新增菜品需求分析和设计接口设计代码开发开发文件上传接口功能开发 菜品分页查询需求分析和设计代码开发 菜品删除功能需求分析与设计代码实现代码优化 修改菜品需求分析和设计代码实现 公共字段自动填充 问题分析 员工表和分…

因为相信,所以简单,因为简单,所以坚持

因为相信&#xff0c;所以简单&#xff1b;因为简单&#xff0c;所以坚持。今天&#xff0c;我有幸受邀参加了九龙珠集团2023年以《蓄力生长》为主题的年会。在这里&#xff0c;我深刻感受到这两句话不仅是九龙珠集团成长的缩影&#xff0c;也是其不断前进的动力。在企业的经营…

选择智能酒精壁炉,拥抱环保与未来生活

保护环境一直是我们共同的责任和目标&#xff0c;而在这场争取保护环境的斗争中&#xff0c;选择使用智能酒精壁炉而非传统壁炉成为了一种积极的行动。这不仅仅是对环境负责&#xff0c;更是对我们自身生活质量的关照。 传统壁炉与智能酒精壁炉的对比 传统壁炉常常以木柴、煤炭…

如何创建VPC并配置安全组以保护您的阿里云服务器

将您的基础架构放在云上意味着您可以接触到全球的许多人。但是&#xff0c;这也意味着不怀好意的人可以访问您的服务。保护您的云网络非常重要。阿里云提供虚拟专用网络 &#xff08;VPC&#xff09;&#xff0c;这是一个安全隔离的私有云&#xff0c;将您的弹性计算服务 &…

算法第十一天-组合总和Ⅳ

组合总和Ⅳ 题目要求 解题思路 来自[负雪明烛] 题目有个明显的提示&#xff1a;求组合的个数&#xff0c;而不是每个组合。如果是要求出每个组合&#xff0c;那么必须使用回溯法&#xff0c;保存所有路径。但是如果是组合个数&#xff0c;一般都应该想到[动态规划]的解法。 直…

vite-admin框架搭建,ESLint + Prettier 语法检测和代码格式化

vite-admin框架搭建&#xff0c;ESLint Prettier 语法检测和代码格式化 1. 环境和工具2. 项目初始化3. 安装插件1. 安装ESLint1.1 安装插件1.2 初始化ESLint 2. 安装Prettier2.1 安装插件2.2 配置Prettier 3. vscode 安装插件及配置3.1 安装插件 ESLint 和 Prettier - Code fo…

许战海战略文库|加加食品:错过窗口期的“酱油第一股”如何逆袭

加加食品集团股份有限公司成立于1996年&#xff0c;是一家综合研发、生产和营销的大型调味品上市公司。该公司在2012年1月6日成功上市&#xff0c;被尊称为“中国酱油第一股”。然而&#xff0c;在近年来&#xff0c;该公司经历了重大挑战&#xff0c;包括持续的业绩下滑、低迷…

Docker简述与基础部署详解

docker官网&#xff1a;https://www.docker.com docker中文库:https://www.docker.org.cn/ Docker是一种开源的容器化平台&#xff0c;用于轻松打包、交付和运行应用程序。Docker的主要优势在于它提供了一种轻量级、可移植、自包含的容器化技术&#xff0c;使得应用程序及其所…

基于uniapp封装的card容器 带左右侧两侧标题内容区域

代码 <template><view class"card"><div class"x_flex_header"><div><title v-if"title ! " class"title" :title"title" :num"num"></title></div><div><s…

计算机网络—— 概述

概述 1.1 因特网概述 网络、互联网和因特网 网络由若干结点和连接这些结点的链路组成多个网络还可以通过路由器互联起来&#xff0c;这样就构成了一个覆盖范围更大的网络&#xff0c;即互联网&#xff08;或互连网&#xff09;。因特网&#xff08;Internet&#xff09;是世…

连接两个路由器的有线连法,关键时候可能会发挥不小的作用

路由器网桥连接两个或多个路由器&#xff0c;以扩展网络范围&#xff0c;提供额外的以太网端口和无线接入点。但在开始之前&#xff0c;你必须首先决定如何使用每个路由器。因此&#xff0c;你需要知道你想要实现什么&#xff0c;并清楚地了解你对每台设备的期望。 例如你想扩…

docker run 命令详解

一、前言 Docker容器是一个开源的应用容器引擎&#xff0c;让开发者可以以统一的方式打包他们的应用以及依赖包到一个可移植的容器中&#xff0c;然后发布到任何安装了Docker引擎的服务器上&#xff08;包括流行的Linux机器、Windows机器&#xff09;&#xff0c;也可以实现虚拟…

目标检测-One Stage-YOLOv5

文章目录 前言一、YOLOv5的网络结构和流程YOLOv5的不同版本YOLOv5的流程YOLOv5s的网络结构图 二、YOLOv5的创新点1. 网络结构2. 输入数据处理3. 训练策略 总结 前言 前文目标检测-One Stage-YOLOv4提到YOLOv4主要是基于技巧的集成&#xff0c;对于算法落地具有重大意义&#x…

面试算法105:最大的岛屿

题目 海洋岛屿地图可以用由0、1组成的二维数组表示&#xff0c;水平或竖直方向相连的一组1表示一个岛屿&#xff0c;请计算最大的岛屿的面积&#xff08;即岛屿中1的数目&#xff09;。例如&#xff0c;在下图中有4个岛屿&#xff0c;其中最大的岛屿的面积为5。 分析 将岛屿…

Mysql 数据库ERROR 1820 (HY000): You must reset your password using ALTER USER 解决办法

Mysql 5.7数据库原来一直都能正常访问&#xff0c;突然访问不了&#xff0c;查看日志提示数据库需要修改密码&#xff0c; 具体解决办法如下操作&#xff1a; Windows 下&#xff1a; mysql的bin目录下&#xff0c; mysql>use mysql; mysql>mysql -uroot -p密码; 判…