【HarmonyOS】键盘遮挡输入框UI布局处理

【HarmonyOS】键盘遮挡输入框UI布局处理

问题背景:

在开发输入框UI时,特别是登录页面的密码输入框靠下,或者是评论底部的pop弹框。
当我们输入框获得焦点后,键盘自下而上显示,一般情况下会遮挡住我们的UI布局。
导致用户输入时,键盘遮挡看不到自己输入的内容。
在这里插入图片描述在这里插入图片描述

解决方案:

在鸿蒙应用开发中,我们针对键盘遮挡问题,通过窗口设置键盘遮挡模式来解决。目前键盘遮挡界面时,可以压缩窗口UI 或者 将窗口UI向上抬起两种方式:
在这里插入图片描述

import { KeyboardAvoidMode, UIContext } from '@kit.ArkUI';aboutToAppear(): void {this.uiContext.setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE);
}// 需要注意的是,这里的上下文uiContext是窗口级别的上下文UIContext,并不是普通context。this.uiContext = this.getUIContext(); // √this.uiContext = getContext(); // x// uiContext最方便的获取方式是,在当前界面中通过:this.getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE);// 当在逻辑类中想要拿到uiContext就只能通过单例或者AppStorage进行存储获取。例如:import { KeyboardAvoidMode, UIContext } from '@kit.ArkUI';
import { hilog } from '@kit.PerformanceAnalysisKit';onWindowStageCreate(windowStage: window.WindowStage) {windowStage.loadContent('pages/Index', (err, data) => {globalThis.SysContext = windowStage.getMainWindowSync().getUIContext(); // 或者你的整个app都需要应用键盘遮挡模式,就可以直接在window创建的时候进行设置,没必要每个界面内调用设置。uiContext.setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE);if (err.code) {return;}});}

1.界面UI压缩 KeyboardAvoidMode.RESIZE
在这里插入图片描述
2.界面UI抬起 KeyboardAvoidMode.OFFSET
在这里插入图片描述
当被抬起的界面中有不需要抬起的控件,如上图所示,其中的的标题栏控件就设置了 .expandSafeArea([SafeAreaType.KEYBOARD])}。

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/a724bf42c1aa482cb79267f357125e6d.png

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

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

相关文章

Rust重写万物之——从头开始编写浏览器引擎

一款用 Rust 编写的全新“轮子”最近备受关注—— 因不满大公司垄断,Gosub 项目团队用 Rust 从头开始编写了一个新的浏览器引擎,目前 star 数已超过 3k。 Gosub 项目的诞生是因为不少用户对当前的 Web 浏览器现状感到不满。 尽管市面上有许多浏览器可供选择,但其中大多数…

抗辐照MCU芯片工艺解析:如何保障芯片的可靠性

行星探索、轨道飞行器任务和空间研究在内的太空项目需要创新的航天器系统技术提供通信与处理功能。随着商业航天的发展,对于航天电子系统需要考虑高可靠与高性能的同时,还需要考虑降低开发成本和缩短上市时间。 以MCU芯片AS32A401为例,该芯片…

python(自用查看版)

目录 1.注意事项 1.1 python的除法不是整除,得到的是浮点数 1.2算术符号基于数学的算术优先级。具体可自行查看。 1.3注释 1.4缩进 1.5换行 1.6常见关键字 1.7续行符 1.8报错 1.9赋值 1.10比较运算符 2.常量和表达式 3.变量 4.数据类型 4.1整型int …

微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径

文章目录 1、index.wxml2、index.js检查点1. 确保目标页面存在2. 确保页面路径配置正确3. 检查页面接收参数productDetail.jsproductDetail.wxmlproductDetail.wxss 总结 1、index.wxml <!-- 商品搜索结果卡片容器 --><view class"search-result"><bl…

科技改变生活:最新智能开关、调光器及插座产品亮相

根据QYResearch调研团队的最新力作《欧洲开关、调光器和插座市场报告2023-2029》显示&#xff0c;预计到2029年&#xff0c;欧洲开关、调光器和插座市场的规模将攀升至57.8亿美元&#xff0c;并且在接下来的几年里&#xff0c;将以4.2%的复合年增长率&#xff08;CAGR&#xff…

OpenGL入门006——着色器在纹理混合中的应用

本节将理解顶点和片段着色器在纹理混合中的应用 文章目录 一些概念纹理时间依赖动画 实战简介dependenciesshader.fsshader.vsteenager.pngtex.png utilswindowFactory.hshader.hRectangleModel.hRectangleModel.cpp main.cppCMakeLists.txt最终效果 一些概念 纹理 概述&…

【9695】基于springboot+vue的学生就业管理系统

作者主页&#xff1a;Java码库 主营内容&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。 收藏点赞不迷路 关注作者有好处 文末获取免费源码 项目描述 本学生就业管理系统以springboot作为框架&#xff…

C语言的进制表示【八进制,十六进制】

文章目录 C语言的进制表示【八进制&#xff0c;十六进制】题目介绍C语言的进制表示1. 十进制2. 八进制3. 十六进制4. 二进制 进制表示总结 C语言的进制表示【八进制&#xff0c;十六进制】 题目介绍 故事的起因是今天在群里看到有人发来的问题 //原题目 int main() {int a 0…

高通Quick板上安装编译Ros1 noetic,LeGO_LOAM,FAR_Planner和rslidar_sdk

环境要求&#xff1a; 这里quick板上安装的是Ubuntu20.04版本 Ros Noeti安装&#xff1a; 1.设置软件源&#xff1a; 官方提供的软件源&#xff1a; sudo sh -c echo "deb http://packages.ros.org/ros/ubuntu $(lsb_release -sc) main" > /etc/apt/sources.list.…

一招解决Mac没有剪切板历史记录的问题

使用Mac的朋友肯定都为Mac的剪切功能苦恼过&#xff0c;旧内容覆盖新内容&#xff0c;导致如果有内容需要重复输入的话&#xff0c;就需要一次一次的重复复制粘贴&#xff0c;非常麻烦 但其实Mac也能够有剪切板历史记录功能&#xff0c;iCopy&#xff0c;让你的Mac也能拥有剪切…

nginx 搭建网站

1.查看防火墙状态systemctl status firewalld 2.getenforce 3.安装nginx yum install nginx -y 4.网站信息 echo "welcome to yinchuankejixuanyuan" > /usr/share/nginx/html/index.html 5.查看命令状态 nginx -t 6.重启 systemctl restart nginx

gin入门

Gin入门笔记 1. 初始gin 1.1. 依赖安装 go get github.com/gin-gonic/gin写gin程序都有一套固定的格式 初始化写路由监听运行 1.2. hello world package mainimport ("github.com/gin-gonic/gin""net/http" )func main() {router : gin.Default()rou…

CentOS 7 安装 ntp,自动校准系统时间

1、安装 ntp yum install ntp 安装好后&#xff0c;ntp 会自动注册成为服务&#xff0c;服务名称为 ntpd 2、查看当前 ntpd 服务的状态 systemctl status ntpd 3、启动 ntpd 服务、查看 ntpd 服务的状态 systemctl start ntpdsystemctl status ntpd 4、设置 ntpd 服务开机启…

Unity3D UI 拖拽

Unity3D 实现 UI 元素拖拽功能。 UI 拖拽 通常画布上的 UI 元素都是固定位置的&#xff0c;我们可以通过实现拖拽接口&#xff0c;让 UI 元素可以被拖拽到其他位置。 拖拽接口 创建一个脚本 UIDrag.cs&#xff0c;在默认继承的 MonoBehaviour 后面&#xff0c;再继承三个接…

基于 SSM(Spring + Spring MVC + MyBatis)框架构建电器网上订购系统

基于 SSM&#xff08;Spring Spring MVC MyBatis&#xff09;框架构建电器网上订购系统可以为用户提供一个方便快捷的购物平台。以下将详细介绍该系统的开发流程&#xff0c;包括需求分析、技术选型、数据库设计、项目结构搭建、主要功能实现以及前端页面设计。 需求分析 …

esp32学习:利用虫洞ESP32开发板,快速实现无线图传

我们的虫洞开发板&#xff0c;能够完美运行esp who AI代码&#xff0c;所以实现无线图传那是非常容易的&#xff0c;我们先看看examples目录&#xff1a; 里面有比较多的web例程&#xff0c;在这些例程下&#xff0c;稍作修改&#xff0c;就可以快速实现我的图传无线功能&#…

mac m1 docker本地部署canal 监听mysql的binglog日志

mac m1 docker本地部署canal监听mysql的binglog日志(虚拟机同理) 根据黑马视频部署 1.docker 部署mysql 1.docker拉取mysql 镜像 因为m1是arm架构.需要多加一条信息 正常拉取 docker pull mysql:tagm1拉取 5.7的版本. tag需要自己指定版本 docker pull --platform linux/x…

还在为慢速数据传输苦恼?Linux 零拷贝技术来帮你!

前言 程序员的终极追求是什么&#xff1f;当系统流量大增&#xff0c;用户体验却丝滑依旧&#xff1f;没错&#xff01;然而&#xff0c;在大量文件传输、数据传递的场景中&#xff0c;传统的“数据搬运”却拖慢了性能。为了解决这一痛点&#xff0c;Linux 推出了 零拷贝 技术&…

基于java+SpringBoot+Vue的微服务在线教育系统设计与实现

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; Springboot mybatis Maven mysql5.7或8.0等等组成&#x…

【无标题】西安交通大学提出少锚点的端到端车道线检测算法Polar R-CNN

Abstract 车道线检测在自动驾驶中是一个关键且充满挑战的任务&#xff0c;特别是在实际场景中&#xff0c;由于车道线可能因其他车辆而被遮挡、形状纤细且长度较长&#xff0c;检测难度增大。现有基于锚点的检测方法通常依赖于预设的锚点来提取特征&#xff0c;并随后对车道线…