IT评测·应用市场-qidao123.com技术社区

标题: 鸿蒙UI开发——基于全屏方案实现沉醉式界面 [打印本页]

---

作者: 慢吞云雾缓吐愁    时间: 2024-11-18 08:21
标题: 鸿蒙UI开发——基于全屏方案实现沉醉式界面
1、概 述

典型应用全屏窗口UI元素包括状态栏、应用界面和底部导航条。
其中状态栏和导航条，通常在沉醉式结构下称为避让区，避让区之外的区域称为安全区。
开发应用沉醉式效果主要指：通过调整状态栏、应用界面和导航条的显示效果来淘汰状态栏导航条等系统界面的突兀感，保证应用的整体观感。
作为对比（未沉醉式左图、沉醉式的右图），示意如下：

大部分环境下，为了保证应用界面的一致性，我们都必要做沉醉式界面适配。
实现沉醉式效果的方式有两种：

• 窗口全屏结构：调整结构系统为全屏结构，界面元素延伸到状态栏和导航条区域（当不隐藏避让区时，可通过接口查询状态栏和导航条区域进行可交互元素避让处理，还可以设置状态栏或导航条的颜色等属性与界面元素匹配。当隐藏避让区时，通过对应接口设置全屏结构）
  
• 组件安全区:  结构系统保持安全区内结构，然后通过接口延伸绘制内容（如配景致，配景图）到状态栏和导航条区域（本方案中界面元素仅做绘制延伸，无法单独结构到状态栏和导航条区域，如果必要单独结构UI元素到状态栏和导航条区域的场景最好照旧利用窗口全屏结构方案处理）。
  

2、窗口全屏结构

全屏结构方式有两个场景：1）不隐藏避让区、2）隐藏避让区。

• 
  
  
  
  • 针对普通的应用场景，我们一样平常不会隐藏避让区（显示状态和导航条）；
    
  • 针对游戏场景，我们一样平常会隐藏避让区（隐藏状态栏和导航条）；
    
  
  

2.1、不隐藏避让区

不隐藏避让区一样平经常见于常规的应用界面中，他保存了界面中的导航栏和顶部的状态栏。开发方式大致分两步，介绍如下：

---

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)

Powered by Discuz! X3.4