探索鸿蒙 TextInput组件

TextInput

根据组件名字,可以得知他是一个文本输出框。

声明代码👇

TextInput({placeholder?:ResourceStr,text?:ResourceStr});

placeholder: 就是提示文本,跟网页开发中的placeholder一样的

text:输入框当前的文本内容

特殊属性:

type(inputType.xxx). 可以决定输入框的类型,xxx的值有Normal、password(密码,会加密)、Email(邮箱格式)、Number(纯数字)等

注意: 只做约束,不做校验。

输入框可以使用事件来控制用户的交互操作。 

测试

使用placeholder来控制未输入时的提示信息

使用type控制输入的类型,比如使用密码 

 当然,我们也可以是对他设置基本样式,比如背景色,宽度等

最重要的,我们可以通过事件来处理逻辑  

@Entry
@Component
struct Index {@State message: string = 'Hello World'build() {Row() {Column() {Image($r('app.media.hongmeng')).width(250)Text($r('app.string.width_label')).fontSize(30).fontWeight(FontWeight.Medium)TextInput({placeholder:'请输入图片宽度:'}).type(InputType.Password).width(300).backgroundColor("#ff0000").onChange(e=>{console.log(e)})}.width('100%')}.height('100%')}
}

 通过事件交互进行图片宽度的改变

我们通过交互事件将用户输入的数字大小赋值给imageWidth变量,再将image组件的width变成响应式的变量来完成这一操作。不过在其中要注意类型的转换。因为textinput的text属性需要的是一个字符串类型的,但是imageWidth是一个数字类型的,所以在使用的时候要考虑类型的转换。这里我使用了Number()和toString()强转。与javascript的语法相似。

@Entry
@Component
struct Index {@State message: string = 'Hello World'@State imageWidth: number = 30build() {Row() {Column() {Image($r('app.media.hongmeng')).width(this.imageWidth)Text($r('app.string.width_label')).fontSize(30).fontWeight(FontWeight.Medium)TextInput({text:this.imageWidth.toString()}).type(InputType.Number).width(150).backgroundColor("#ff0000").onChange(e=>{this.imageWidth = Number(e)})}.width('100%')}.height('100%')}
}

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

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

相关文章

ChatGPT的进化史

真正的人工智能可以变现的完全与人类一样思考时,世界会发生什么变化? ChatGPT就如它的名字一样,人类创造它最初的目的只是一个聊天机器人。聊天嘛,只要你和他对话时他的回答像人类一样自然就行了,看起来并没什么了不起…

Linux服务器磁盘占用过高解决思路

服务器在运行时,经常出现磁盘占用过高,可能有如下原因: 1、是否有产生过大的日志文件,或者大文件中的log过大,导致磁盘占用过高; 2、查看磁盘占用情况,分析哪个目录中文件占比最大; …

贝蒂的捣蛋小游戏~(C语言)

引言: 前面贝蒂已经给大家介绍了选择,循环结构~,今天贝蒂就基于这两种结构,为大家讲解一种捣蛋小游戏的设计思路和方法哦。 1.游戏要求 游戏要求: 1. 电脑⾃动⽣成1~100的随机数 2. 玩家猜数字,猜数字的过…

52 代码审计-PHP项目类RCE及文件包含下载删除

目录 漏洞关键字:演示案例:xhcms-无框架-文件包含跨站-搜索或应用-includeearmusic-无框架-文件下载-搜索或应用功能-down等zzzcms-无框架-文件删除RCE-搜索或应用-unlink、eval 漏洞关键字: SQL注入: select insert update mysql_query mysql等 文件上传&#xff…

【FreeRTOS】信号量——简介、常用API函数、注意事项、项目实现

在FreeRTOS中,信号量是一种非常重要的同步机制,用于实现任务间的互斥访问和同步操作。通过信号量,不同的任务可以安全地共享资源,避免竞争和冲突,从而确保系统的稳定性和可靠性。本篇博客将介绍FreeRTOS中信号量的基本…

常用Nmap脚本

端口扫描类脚本 Nmap是一款非常流行的端口扫描工具,它可以帮助渗透测试工程师识别目标网络上开放的端口,并提供有关这些端口的详细信息。Nmap还提供了一系列基于脚本的功能,这些脚本可以扩展Nmap的功能,使其能够更深入地探测目标网…

使用Huggingface创建大语言模型RLHF训练流程的完整教程

ChatGPT已经成为家喻户晓的名字,而大语言模型在ChatGPT刺激下也得到了快速发展,这使得我们可以基于这些技术来改进我们的业务。 但是大语言模型像所有机器/深度学习模型一样,从数据中学习。因此也会有garbage in garbage out的规则。也就是说…

AUTOSAR CP Int-Watchdog简介

Int Watchdog 1 简介2 EB 中配置 TC39X3 Wdg 在代码中使用1 简介 内部看门狗驱动[sws_Wdg_00161]要访问内部看门狗硬件,对应的 Wdg 模块实例应该直接访问看门狗服务的硬件。提示:内部看门狗驱动程序是微控制器抽象层的一部分,它允许直接的硬件访问。注意:内部看门狗的日常服…

第21章总结 网络通信

21.1 网络程序设计基础 网络程序设计编写的是与其他计算机进行通信的程序。Java已经将网络程序所需要的元素封装成不同的类,用户只要创建这些类的对象,使用相应的方法,即使不具备有关的网络知识,也可以编写出高质量的网络通信程序…

【评测脚本】机器信息评测(初版)

背景 QA的实际工作过程中,除了业务相关的测试外,也会涉及到一些评测相关的工作,甚至还要做多版本、多维度的评估分析。尤其是现在火热的大模型,相关的评测内容更是核心中的核心。当然本文的内容只是做一些初级的机器相关的评测信息,更多更广的评测需要更多时间的积累和总…

JVM的内存结构详解「重点篇」

一、JVM虚拟机数据区 虚拟机栈 1、 线程私有 2、 每个方法被执行的时候都会创建一个栈帧用于存储局部变量表,操作栈,动态链接,方法出口等信息。每一个方法被调用的过程就对应一个栈帧在虚拟机栈中从入栈到出栈的过程。 3、栈帧: 是用来存储…

安装mysql数据库

1.1下载APT存储库(下载链接) 1.2安装APT存储库(注意好正确的路径) 将下载的文件传输到linux服务器对应目录下后执行以下命令: sudo dpkg -i mysql-apt-config_0.8.10-1_all.deb 选择mysql5.7 然后点击ok 然后执行 s…

应用架构——集群、分布式、微服务的概念及异同

一、什么是集群? 集群是指将多台服务器集中在一起, 每台服务器都实现相同的业务,做相同的事;但是每台服务器并不是缺 一不可,存在的主要作用是缓解并发能力和单点故障转移问题。 集群主要具有以下特征: …

JAVA使用POI向doc加入图片

JAVA使用POI向doc加入图片 前言 刚来一个需求需要导出一个word文档,文档内是系统某个界面的各种数据图表,以图片的方式插入后导出。一番查阅资料于是乎着手开始编写简化demo,有关参考poi的文档查阅 Apache POI Word(docx) 入门示例教程 网上大多数是XXX…

el-table-column 添加 class类

正常添加class 发现没有效果 class"customClass" 发现并没有添加上去 看了一下官网发现 class-name 可以实现 第一步: :class-name"customClass" 第二步 : customClass: custom-column-class, 然后就发现可以了

Qt简介、工程文件分离、创建Qt工程、Qt的帮助文档

QT 简介 core:核心模块,非图形的接口类,为其它模块提供支持 gui:图形用户接口,qt5之前 widgets:图形界面相关的类模块 qt5之后的 database:数据库模块 network:网络模块 QT 特性 开…

IntelliJ IDEA使用Eval Reset

文章目录 IntelliJ IDEA使用Eval Reset说明具体操作 IntelliJ IDEA使用Eval Reset 说明 操作系统:windows10 版本:2020.1 IntelliJ IDEA安装可查看:安装教程 具体操作 添加,输入网址 https://plugins.zhile.io然后搜索“IDE E…

IntelliJ IDEA安装

文章目录 IntelliJ IDEA安装说明下载执行安装 IntelliJ IDEA安装 说明 操作系统:windows10 版本:2020.1 下载 官网地址 执行安装

奇点云2023数智科技大会来了,“双12”直播见!

企业数字化进程深入的同时,也在越来越多的新问题中“越陷越深”: 数据暴涨,作业量和分析维度不同以往,即便加了机器,仍然一查就崩; 终于搞定新增渠道数据的OneID融合,又出现几个渠道要变更&…

自动定量包装机市场研究: 2023年行业发展潜力分析

中国包装机械业取得了快速发展,但也出现了一些低水平重复建设现象。据有关资料显示,与工业发达国家相比,中国食品和包装机械产品品种缺乏25%-30%,技术水平落后15-25年。我国包装专用设备制造行业规模以上企业有319家,主…