当前位置：首页 > news >正文

鸿蒙UI开发——键盘弹出避让模式设置

news 来源：原创 2025/6/9 1:45:50

1、概述

我们在鸿蒙开发时，不免会遇到用户输入场景，当用户准备输入时，会涉及到输入法的弹出，我们的界面针对输入法的弹出有两种避让模式：上抬模式、压缩模式。

下面针对输入法的两种避让模式的设置做简单介绍。

2、设置避让模式

设置虚拟键盘抬起时页面的避让模式，API介绍如下：

setKeyboardAvoidMode(value: KeyboardAvoidMode): void

获取虚拟键盘抬起时的页面避让模式，API介绍如下：

getKeyboardAvoidMode(): KeyboardAvoidMode

其中，KeyboardAvoidMode是一个枚举，默认值为OFFSET上抬模式，定义如下：

OFFSET, // 上抬模式。RESIZE, // 压缩模式。

KeyboardAvoidMode.RESIZE是压缩Page的大小，Page下设置百分比宽高的组件会跟随Page压缩，直接设置宽高的组件会按设置的固定大小布局。

👉🏻 设置为压缩模式

设置虚拟键盘抬起时压缩页面大小为减去键盘的高度。

下面的示例通过调用setKeyboardAvoidMode设置键盘避让模式为RESIZE模式，实现键盘抬起时page的压缩效果。

我们先在EntryAbility中设置避让模式（我们也可以在Page中获取到UIContext动态设置），示例代码如下（第10行）：

// EntryAbility.etsimport { KeyboardAvoidMode } from '@kit.ArkUI';onWindowStageCreate(windowStage: window.WindowStage) {  // Main window is created, set main page for this ability  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');  windowStage.loadContent('pages/Index', (err, data) => {    windowStage.getMainWindowSync().getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE);    if (err.code) {      hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');      return;    }    hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');  });}

然后写一个简单的界面，代码如下：

// xxx.ets@Entry@Componentstruct KeyboardAvoidExample1 {  build() {    Column() {      Row().height("30%").width("100%").backgroundColor(Color.Gray)      TextArea().width("100%").borderWidth(1)      Text("I can see the bottom of the page").width("100%").textAlign(TextAlign.Center).backgroundColor(Color.Pink).layoutWeight(1)    }.width('100%').height("100%")  }}

默认情况下（键盘未弹出），效果如下：

键盘弹出后，效果如下（底部的粉色区域被压缩）：

👉🏻 设置为上抬模式

下面的示例通过调用setKeyboardAvoidMode设置键盘避让模式为OFFSET模式，实现键盘抬起时page的上抬效果。

当输入光标距离屏幕底部的高度大于键盘高度时，page不会抬起

我们先在EntryAbility中设置避让模式（我们也可以在Page中获取到UIContext动态设置），示例代码如下（第10行）：

// EntryAbility.etsimport { KeyboardAvoidMode } from '@kit.ArkUI';onWindowStageCreate(windowStage: window.WindowStage) {  // Main window is created, set main page for this ability  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');  windowStage.loadContent('pages/Index', (err, data) => {   windowStage.getMainWindowSync().getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.OFFSET);    if (err.code) {      hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');      return;    }    hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');  });}

然后写一个简单的界面（与Resize的一样），代码如下：

// xxx.ets@Entry@Componentstruct KeyboardAvoidExample2 {  build() {    Column() {      Row().height("30%").width("100%").backgroundColor(Color.Gray)      TextArea().width("100%").borderWidth(1)      Text("I can see the bottom of the page").width("100%").textAlign(TextAlign.Center).backgroundColor(Color.Pink).layoutWeight(1)    }.width('100%').height("100%")  }}

默认情况下（键盘未弹出），效果如下：

键盘弹出后，效果如下（底部粉色区域的文字被键盘遮挡，同时，由于底部粉色区域高于键盘，所以界面不会因为键盘弹出而发生布局变化）：

鸿蒙UI开发——键盘弹出避让模式设置

1、概述我们在鸿蒙开发时，不免会遇到用户输入场景，当用户准备输入时，会涉及到输入法的弹出，我们的界面针对输入法的弹出有两种避让模式：上抬模式、压缩模式。下面针对输入法的两种避让模式的设置做简单介绍。 2、…...

编程日记 2025/6/4 3:24:10

Multi-Agent如何设计

文章小结研究背景和目的在单一大语言模型长期主导人工智能领域的背景下，多智能体系统在对话任务解决中逐渐崭露头角。虽然先前的研究已经展示了多智能体系统在推理任务和创造性工作中的潜力，但对于其在对话范式方面的局限性以及单个智能体的影响&am…...

编程日记 2025/6/1 3:42:04

git操作（bitbucket仓库）

在代码远程版本控制和提交过程中需要经常使用git命令，熟练使用git是一个软件工程师必备的技能之一。将主版本代码fork到自己的 bitbucket 子仓库中克隆到本地利用ssh链接进行克隆，将 fork 的子仓库克隆到本地。 git clone ssh://{$你fork的子bitbu…...

编程日记 2025/6/2 7:46:49

举例表结构字段名称字段类型是否NULL键值默认值附加信息FieldTypeNullKeyDefaultExtraidintNoUNI(唯一键）Nullauto_incrementnameverchar(10)NoPRI(主键)NullgenderenumNomanagetinyintYesNulltelphoneintYesNullhome_idintyesMUL(外键)Null 目录举例表结构1. 空…...

编程日记 2025/6/2 12:50:11

音频DSP的发展历史

音频数字信号处理（DSP）的发展历史是电子技术、计算机科学和音频工程共同进步的结果。这个领域的进展不仅改变了音乐制作、音频后期制作和通信的方式，也影响了音频设备的设计和功能。以下是对音频DSP发展历史的概述： 早期概念和理论…...

编程日记 2025/5/30 19:42:45

学习笔记-Kotlin

准备工作下载安装kotlin编译器,记录此笔记时的版本是v1.2.10，目前最新发布版本是v2.1.10解压下载的安装包,配置环境变量指向bin目录(官方指导). 如果不想在本地安装环境,也可以使用在线编辑器尝试编写第一个helloWorld 新建一个名为hello.kt的文件,内容如下: f…...

编程日记 2025/6/1 10:41:00

linux解压命令（可整理到CSDN）

1. tar -xvf ffmpeg-7.0.2.tar.xz x：表示解压文件。 v：表示在解压过程中显示文件（verbose模式）。这个选项是可选的，加上它可以让你看到正在解压的文件列表，但如果不加也不会影响解压过程。 f：…...

编程日记 2025/6/1 20:57:48

Boost Asio TCP异步服务端和客户端

服务端消息分两次发送，第一次发送head，第二次发送body。接收也是先接收head，然后通过head结构中的body长度字段再接收body。 TcpServer.h #pragma once #include <atomic> #include <vector> #include <unordered_set> #…...

编程日记 2025/5/28 8:04:07

【Apache Doris】周FAQ集锦：第 29 期

引言欢迎查阅本周的 Apache Doris 社区 FAQ 栏目！ 在这个栏目中，每周将筛选社区反馈的热门问题和话题，重点回答并进行深入探讨。旨在为广大用户和开发者分享有关 Apache Doris 的常见问题。通过这个每周 FAQ 栏目，希望帮助社…...

编程日记 2025/6/4 1:50:06

速通Docker === 介绍与安装

目录 Docker介绍 Docker优势 Docker组件 Docker CLI (命令行接口) Docker Host (Docker 守护进程) 容器 (Container) 镜像 (Image) 仓库 (Registry) 关系总结应用程序部署方式传统部署 (Traditional Deployment) 虚拟化部署 (Virtualization Deployment) 容器部署…...

编程日记 2025/6/3 17:47:51

云平台一键部署【Video-Background-Removal】视频换背景，无任何限制，随意换

Video-Background-Removal 是一款革命性的视频背景替换工具，旨在让用户轻松实现视频背景的快速更换。无论你是专业创作者还是普通用户，这款软件都能让你在几秒钟内改变背景，完全消除限制，随心所欲，随时随地想换就换&am…...

编程日记 2025/5/27 13:34:32

AI刷题-最大矩形面积问题、小M的数组变换

目录一、最大矩形面积问题问题描述输入格式输出格式输入样例输出样例数据范围解题思路： 问题理解数据结构选择算法步骤最终代码： 运行结果： 二、小M的数组变换问题描述测试样例解题思路： 问题…...

编程日记 2025/6/3 0:42:48

ts类型断言各种写法

在 TypeScript 中，类型断言（Type Assertion）有两种主要的写法：**尖括号语法** (<Type>) 和 **as 关键字语法**。这两种方式都可以用来告诉编译器某个表达式的具体类型，但它们在不同的上下文中有各自的适用性和局…...

编程日记 2025/6/2 19:33:49

第十二章：算法与程序设计

文章目录： 一：基本概念 1.算法与程序 1.1 算法 1.2 程序 2.编译预处理 3.面向对象技术 4.程序设计方法 5.SOP标志作业流程 6.工具 6.1 自然语言 6.2 流程图 6.3 N/S图 6.4 伪代码 6.5 计算机语言二：程序设计基础 1.常数 …...

编程日记 2025/6/4 9:41:58

计算机网络 | IP地址、子网掩码、网络地址、主机地址计算方式详解

关注：CodingTechWork 引言在计算机网络中，IP地址、子网掩码和网络地址是构建网络通信的基本元素。无论是企业网络架构、互联网连接，还是局域网（LAN）配置，它们都起着至关重要的作用。理解它们的工作原理&a…...

编程日记 2025/6/4 9:44:06

一文读懂高频考题！进程、线程、协程最全方位对比剖析

一、基本概念（一）定义与特征进程在计算机科学里，进程是操作系统正在运行的程序的实例，是资源分配的基本单位。就好比每个进程都像一个小王国，它有自己独立的领土，这里的领土就是内存空间、代码块、数据和文件句柄等资源。比如说，你在电脑上同时打开一个文字处理软件…...

编程日记 2025/6/4 9:43:17

Elasticsearch搜索引擎(二)

RestClient 基础前言一、RestAPI1. 初始化 *RestClient*2. 创建索引库3. 删除索引库4. 判断索引库是否存在二、RestClient操作文档1.新增文档2.查询文档3. 删除文档4. 修改文档5. 批量导入文档前言 ES官方提供了各种不同语言的客户端用来操作ES，这些客户端的本质…...

编程日记 2025/6/4 9:43:51

docker 部署 Kafka 单机和集群

一、准备工作安装 Docker 确保本机已安装 Docker。可以通过以下命令检查 Docker 是否已安装：docker --version如果未安装，可以访问 Docker 官网下载并安装 Docker Desktop（Windows 和 Mac）或使用包管理器安装（Linux&…...

编程日记 2025/6/4 9:42:14

新增文章分类功能

总说过程参考黑马程序员SpringBoot3Vue3全套视频教程，springbootvue企业级全栈开发从基础、实战到面试一套通关_哔哩哔哩_bilibili 目录总说一、功能实现 1.1 Controller层 1.2 Service层 1.3 Impl层 1.4 Mapper层 1.5 测试接口二、优化 2.1 2.2 一、…...

编程日记 2025/6/4 8:17:24

[c语言日寄]精英怪：三子棋（tic-tac-toe）3命慢通[附免费源码]

哈喽盆友们，今天带来《c语言》游戏中[三子棋boss]速通教程！我们的目标是一边编写博文，一边快速用c语言实现三子棋游戏。准备好瓜子，我们计时开始！ 前期规划在速通中，我们必须要有清晰的前期规划&#xf…...

编程日记 2025/6/4 9:43:33

【Rust自学】12.1. 接收命令行参数

12.1.0. 写在正文之前第12章要做一个实例的项目——一个命令行程序。这个程序是一个grep(Global Regular Expression Print)，是一个全局正则搜索和输出的工具。它的功能是在指定的文件中搜索出指定的文字。这个项目分为这么几步： 接收命令行参数&am…...

编程日记 2025/6/4 9:42:30

Qt应用之MDI（多文档设计）

qt creator 版本6.8.0 MinGW 64bit 由此模块可以扩展成设计一个qt文本编辑器。界面如下部分功能展示如下新建文件打开文件 mdi模式、级联模式和平铺模式界面和程序构建过程。 1.如图所需.cpp和.h文件 2.mainwindow.ui和tformdoc.ui界面布局如下不懂什么是Action如何…...

编程日记 2025/6/4 9:43:01

使用FFmpeg和Python将短视频转换为GIF的使用指南

使用FFmpeg和Python将短视频转换为GIF的使用指南在数字时代，GIF动图已成为表达情感和分享幽默的重要媒介。无论是社交媒体上的搞笑片段还是创意项目中的视觉效果，GIF都能迅速抓住观众的注意力。然而，很多人不知道如何将短视频转换为GIF。本…...

编程日记 2025/6/3 8:37:06

Qt 各版本选择

嵌入式推荐用 Qt4.8，打包的程序小：Qt4.8.7是Qt4的终结版本，是Qt4系列版本中最稳定最经典的最后支持xp系统的长期支持版本：Qt5.6.3；Qt5.7.0是最后支持xp系统的非长期支持版本。最后提供mysql数据库插件的版本&#xf…...

编程日记 2025/6/3 10:14:06

Web基础-分层解耦

思考：什么是耦合？什么是内聚？软件设计原则是什么？ 耦合：衡量软件中各个层 / 各个模块的依赖关联程度。内聚：软件中各个功能模块内部的功能联系。软件设计原则：高内聚低耦合。那我们该如何实现…...

编程日记 2025/5/29 4:41:41

G1原理—8.如何优化G1中的YGC

大纲 1.5千QPS的数据报表系统发生性能抖动的优化(停顿时间太小导致新生代上不去) 2.由于产生大量大对象导致系统吞吐量降低的优化(大对象太多频繁Mixed GC) 3.YGC其他相关参数优化之TLAB参数优化 4.YGC其他相关参数优化之RSet、PLAB和大对象的处理优化 1.5千QPS的数据报表系…...

编程日记 2025/6/3 4:04:08

Hugging Face 的 Trainer类用法

一、使用方法 Hugging Face 的 Trainer 类是一个高级API，用于简化训练、评估和预测的流程。以下是如何使用 Trainer 类的基本步骤： 1. 导入必要的类和函数首先，您需要导入 Trainer 类以及其他可能需要的类或函数。 from transformers im…...

编程日记 2025/5/30 3:13:21

RabbitMQ前置概念

文章目录 1.AMQP协议是什么？2.rabbitmq端口介绍3.消息队列的作用和使用场景4.rabbitmq工作原理5.整体架构核心概念6.使用7.消费者消息推送限制（work模型）8.fanout交换机9.Direct交换机10.Topic交换机（推荐）11.声明队列…...

编程日记 2025/6/1 18:11:35

IDEA2023版中TODO的使用

介绍：TODO其实本质上还是注释，只不过加上了TODO这几个字符，可以让使用者快速找到。注意：在类、接口等文件中，注释是使用// 即：// TODO 注释内容在配置文件中，注释是使用# 即：# TO…...

编程日记 2025/6/4 4:12:29

（STM32笔记）十二、DMA的基础知识与用法第二部分

我用的是正点的STM32F103来进行学习，板子和教程是野火的指南者。之后的这个系列笔记开头未标明的话，用的也是这个板子和教程。 DMA的基础知识与用法二、DMA传输设置1、数据来源与数据去向外设到存储器存储器到外设存储器到存储器 2、每次传输大小3、传…...

编程日记 2025/6/4 16:46:31

windows系统“GameInputRedist.dll”文件丢失或错误导致游戏运行异常如何解决？windows系统DLL文件修复方法

GameInputRedist.dll是存放在windows系统中的一个重要dll文件，缺少它可能会造成部分游戏不能正常运行。当你的电脑弹出提示“无法找到GameInputRedist.dll”或“计算机缺少GameInputRedist.dll”等错误问题，请不用担心，我们将深入解析DLL文件…...

编程日记 2025/6/4 1:35:55

使用分割 Mask 和 K-means 聚类获取天空的颜色

引言在计算机视觉领域，获取天空的颜色是一个常见任务，广泛应用于天气分析、环境感知和图像增强等场景。本篇博客将介绍如何通过已知的天空区域 Mask 提取天空像素，并使用 K-means 聚类分析天空颜色，最终根据颜色占比查表得到主导…...

编程日记 2025/6/3 18:49:36

UML系列之Rational Rose笔记四：时序图（顺序图_序列图）

时序图有很多画法，这基本上能算rose里面要求最乱的一种图了；有些人的需求是BCE模式，这是正常规范点的，有些人就不需要，有些需要用数据库交互，有些不需要；没有一个较为统一的需求；在此…...

编程日记 2025/6/3 23:28:21

nginx反向代理http 和 https(案例)

说明：在香港开了一台虚拟机，主要用于将来自国外访问的80和443代理到大陆IDC机房 (1) 定义80和443的upstream 211.155.82.174 是keepalive中VIP对应的公网IP（在国内访问www.playyx.com解析到211.155.82.174） upstream new_server…...

编程日记 2025/6/2 20:58:49

Dify应用-工作流

目录 DIFY 工作流参考 DIFY 工作流 2025-1-15 老规矩感谢参考文章的作者,避免走弯路。 2025-1-15 方便容易上手在dify的一个桌面上,添加多个节点来完成一个任务。每个工作流必须有一个开始和结束节点。节点之间用线连接即可。每个节点可以有输入和输出输出类型有,字符串,…...

编程日记 2025/5/30 8:42:26

装备制造业：建立项目“四算”管理：以合同为源头，以项目为手段实现合同的测算、预算、核算与决算的管控体系

尊敬的各位管理层： 大家好！作为装备制造业的 CFO，我今天要向大家汇报的是如何建立项目“四算”管理，即以合同为源头，以项目为手段实现合同的测算、预算、核算与决算的管控体系。在当前市场竞争激烈、成本压力不断增大…...

编程日记 2025/6/2 21:00:08

Centos7将/dev/mapper/centos-home磁盘空间转移到/dev/mapper/centos-root

1、查看存储 df -h文件系统容量已用可用已用% 挂载点 devtmpfs 126G 0 126G 0% /dev tmpfs 126G 0 126G 0% /dev/shm tmpfs 126G 19M 126G 1% /run tmpfs …...

编程日记 2025/5/31 19:17:01

docker 部署 MantisBT

1. docker 安装MantisBT docker pull vimagick/mantisbt:latest 2.先运行实例，复制配置文件 docker run -p 8084:80 --name mantisbt -d vimagick/mantisbt:latest 3. 复制所需要配置文件到本地路径 docker cp mantisbt:/var/www/html/config/config_inc.php.…...

编程日记 2025/6/2 20:59:05

【Vue - Element 】实现表单输入框的远程搜索功能

需求表单是一个常见的元素，而在表单中，常常需要用户从大量的数据中选择一个或多个选项。为了提高用户体验，提供远程搜索功能可以帮助用户快速找到所需的选项，而不是从冗长的下拉列表中手动查找。以该需求为例，我…...

编程日记 2025/6/2 8:04:37

学习华为熵减：激发组织活力（系列之三）

目录为什么学习华为？ 学习华为什么？ 一、势：顺势而为，在风口上猪都会飞起来。二、道：就是认识和利用规律层面，文化和制度创新就是企业经营之道。三、法：就是一套价值管理的变革方法论。…...

编程日记 2025/6/2 8:09:10

多种vue前端框架介绍

学如逆水行舟，不进则退。在现今的软件开发领域，Vue.js凭借其高效、灵活和易于上手的特性，成为了前端开发的热门选择。对于需要快速搭建企业级后台管理系统的开发者而言，使用现成的Vue后台管理系统模板无疑是一个明智之举。本文…...

编程日记 2025/6/2 20:59:21

C语言重点回顾（持续更新中~）

个人见解，有异议可以留言~ 第一讲：初识C语言目录 1.编译和链接 2.main函数 3.库函数 4.关键字 5.字符和字符串 6.转义字符 1.编译和链接初始的C语言源代码是一个文本文件，要想将一个文本文件变成一个执行文件，需要经过编…...

编程日记 2025/6/2 19:33:57

Navicat Premium 原生支持阿里云 PolarDB 数据库

近日，我司旗下的 Navicat Premium 软件通过了阿里云 PolarDB 数据库产品生态集成认证，这标志着 Navicat 通过原生技术全面实现了对秒级弹性、高性价比、稳定可靠的PolarDB 数据库三大引擎（PolarDB MySQL版、PolarDB PostgreSQL版和 PolarDB f…...

编程日记 2025/6/4 8:53:03

青少年编程与数学 02-006 前端开发框架VUE 25课题、UI数据

青少年编程与数学 02-006 前端开发框架VUE 25课题、UI数据一、UI数据二、Element Plus处理响应式数据三、Vuetify处理响应式数据课题摘要:本文探讨了UI数据在用户界面中的重要性和处理方法。UI数据包括展示数据、用户输入、状态数据等，对用户体验和应用交互性有直…...

编程日记 2025/6/2 23:48:58

用css和html制作太极图

目录 css相关参数介绍边距边框伪元素选择器太极图案例实现、代码效果 css相关参数介绍边距 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>*{margin: 0;padding: 0;}div{width: …...

编程日记 2025/6/4 17:19:08

软件测试入门—功能需求分析：以一个旅游管理系统为例

在软件测试的旅程中，功能需求分析是测试人员构建高质量测试用例的基础，它确保软件的各项功能都能按照预期正常运行。接下来，我们将以一个旅游管理系统为例，详细阐述如何进行功能需求分析，帮助大家更清晰地掌握这一重要…...

编程日记 2025/6/2 23:50:02

深度解析Linux中关于操作系统的知识点

操作系统概述与核心概念任何计算机系统都包含一个基本的程序集合，成为操作系统OS 操作系统是一款进行软硬件管理的软件操作系统包括： 内核（进程管理，内存管理，驱动管理） 其他程序（例如数据…...

编程日记 2025/6/2 23:50:34

【深度学习】关键技术-激活函数（Activation Functions）

激活函数（Activation Functions） 激活函数是神经网络的重要组成部分，它的作用是将神经元的输入信号映射到输出信号，同时引入非线性特性，使神经网络能够处理复杂问题。以下是常见激活函数的种类、公式、图形特点及其应…...

编程日记 2025/6/2 23:49:31

分布式ID的实现方案

1. 什么是分布式ID 对于低访问量的系统来说，无需对数据库进行分库分表，单库单表完全可以应对，但是随着系统访问量的上升，单表单库的访问压力逐渐增大，这时候就需要采用分库分表的方案，来缓解压力。 …...

编程日记 2025/6/2 7:46:00

电脑有两张网卡，如何实现同时访问外网和内网？

要是想让一台电脑用两张网卡，既能访问外网又能访问内网，那可以通过设置网络路由还有网卡的 IP 地址来达成。检查一下网卡的连接得保证电脑的两张网卡分别连到外网和内网的网络设备上，像路由器或者交换机啥的。给网卡配上不一样的 IP 地…...

编程日记 2025/6/2 23:50:19

1、概 述

2、设置避让模式

相关文章：

1、概述