ToB企服应用市场:ToB评测及商务社交产业平台

标题: 鸿蒙NEXT开发-沉醉式导航和键盘避让模式 [打印本页]

---

作者: 三尺非寒    时间: 2025-2-20 03:21
标题: 鸿蒙NEXT开发-沉醉式导航和键盘避让模式
 注意：博主有个鸿蒙专栏，里面从上到下有关于鸿蒙next的教学文档，各人感兴趣可以学习下
假如各人觉得博主文章写的好的话，可以点下关注，博主会不停更新鸿蒙next干系知识
目次
1. 沉醉式导航
1.1 基本介绍
1.2 如何设置沉醉式效果
1.2.1 使用windowStage来设置
1.2.2 安全地区expandSafeArea
2. 键盘避让模式
2.1 基本介绍
2.2 代码示例
2.3 用法

---

1. 沉醉式导航


1.1 基本介绍

典型应用全屏窗口UI元素包括状态栏、应用界面和底部导航条，其中状态栏和导航条，通常在沉醉式结构下称为避让区；避让区之外的地区称为安全区。开发应用沉醉式效果主要指通过调整状态栏、应用界面和导航条的表现效果来淘汰状态栏导航条等系统界面的突兀感，从而使用户获得最佳的UI体验
开发应用沉醉式效果主要要思量如下几个设计要素：

• UI元素避让处理：导航条底部地区可以响应点击事件，除此之外的可交互UI元素和应用关键信息不发起放到导航条地区。状态栏表现系统信息，假如与界面元素有冲突，需要思量避让状态栏。
  
• 沉醉式效果处理：将状态栏和导航条颜色与界面元素颜色相匹配，不出现显着的突兀感。
  

注意：正常环境动手机屏幕上方和下方会保留一个定的避让地区，其余地区都是安全地区
提供属性方法允许开发者设置组件绘制内容突破安全地区的限定，通过expandSafeArea属性支持组件不改变结构环境下扩展其绘制地区至安全区外，通过设置setKeyboardAvoidMode来设置虚拟键盘弹出时页面的避让模式。页面中有标题栏等文字不盼望和非安全区重叠时，发起对组件设置expandSafeArea属性到达沉醉式效果，也可以直接通过窗口接口setWindowLayoutFullScreen设置沉醉式。

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);

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4