鸿蒙NEXT开发-沉浸式导航和键盘避让模式（基于最新api12稳定版）

留意：博主有个鸿蒙专栏，里面从上到下有关于鸿蒙next的教学文档，各人感兴趣可以学习下
如果各人以为博主文章写的好的话，可以点下关注，博主会一直更新鸿蒙next相关知识
专栏地点: https://blog.csdn.net/qq_56760790/category_12794123.html

目次
1. 沉浸式导航
1.1 基本先容
1.2 如何设置沉浸式效果
1.2.1 利用windowStage来设置
1.2.2 安全区域expandSafeArea
2. 键盘避让模式
2.1 基本先容
2.2 代码示例
2.3 用法
3. 学习地点

---

1. 沉浸式导航


1.1 基本先容

范例应用全屏窗口UI元素包括状态栏、应用界面和底部导航条，其中状态栏和导航条，通常在沉浸式布局下称为避让区；避让区之外的区域称为安全区。开发应用沉浸式效果重要指通过调解状态栏、应用界面和导航条的显示效果来减少状态栏导航条等体系界面的突兀感，从而利用户获得最佳的UI体验
开发应用沉浸式效果重要要考虑如下几个计划要素：

• UI元素避让处置处罚：导航条底部区域可以相应点击变乱，除此之外的可交互UI元素和应用关键信息不建议放到导航条区域。状态栏显示体系信息，如果与界面元素有冲突，需要考虑避让状态栏。
  
• 沉浸式效果处置处罚：将状态栏和导航条颜色与界面元素颜色相匹配，不出现明显的突兀感。
  

留意：正常环境下手机屏幕上方和下方会保存一个定的避让区域，其余区域都是安全区域

1.2 如何设置沉浸式效果

• 利用windowStage的设置全屏的方式
  
• 利用组件的安全区域扩展的方式
  

1.2.1 利用windowStage来设置


在ability中通过getMainWindow可以获取主窗体，然后通过得到的window对象设置全屏即可实现

1. windowStage.getMainWindow().then(window => {
2.   window.setWindowLayoutFullScreen(true)
3. })

复制代码

通过这种方式最简单，但是相当于给所有的页面都设置了沉浸式，如果某些页面不需要设置沉浸式，还需要在页面中通过获取window来关闭

1. aboutToAppear(): void {
2.   window.getLastWindow(getContext())
3.     .then(win => {
4.       win.setWindowLayoutFullScreen(false)
5.     })
6. }

复制代码

1.2.2 安全区域expandSafeArea


相对于上述通过window设置所有页面举行全局的设置，expandSafeArea是个按需的方式，哪个页面需要利用
沉浸式，直接自己设置即可。

• 作用控制组件扩展其非安全区域。
  

1.       Image($r("app.media.dog1"))
2.         .width(100)
3.         .height(50)
4.         .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])

复制代码

2. 键盘避让模式


2.1 基本先容

当我们存在输入框的页面，如果点击输入框，此时就会弹出键盘，此时键盘的弹出会出问题，如下图

2.2 代码示例

1. @Entry
2.   @Component
3.   struct Index {
5.     build() {
6.       Column() {
7.         Row() {
8.           Text("顶部内容")
9.         }
10.         .justifyContent(FlexAlign.Center)
11.           .height(50)
12.           .width('100%')
13.         Column() {
14.           Text("中间内容")
15.         }
16.         .justifyContent(FlexAlign.Center)
17.           .backgroundColor(Color.Orange)
18.           .width('100%')
19.           .layoutWeight(1)
20.         Row() {
21.           TextInput({ placeholder: '请输入内容' })
22.             .width('100%')
23.         }
24.         .padding({
25.           left: 10,
26.           right: 10
27.         })
28.           .justifyContent(FlexAlign.Center)
29.           .height(50)
30.           .width('100%')
31.       }
32.       .width('100%')
33.         .height('100%')
34.     }
35.   }

复制代码

我们可以设置键盘的避让模式，让窗口被键盘压缩，默认环境下，窗口和键盘的环境是如许的

设置为压缩就变成

2.3 用法

1. import { KeyboardAvoidMode } from '@kit.ArkUI';
2. let keyboardAvoidMode = windowStage.getMainWindowSync().getUIContext().getKeyboardAvoidMode();
3. // 设置虚拟键盘抬起时压缩页面大小为减去键盘的高度
4. windowStage.getMainWindowSync().getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE);

复制代码

3. 学习地点

全网首发鸿蒙NEXT星河版零基础入门到实战，2024年最新版，企业级开发！视频连续更新中！_哔哩哔哩_bilibili