harmony开发之Text组件的使用

TextInput、TextArea是输入框组件,通常用于响应用户的输入操作,比如评论区的输入、聊天框的输入、表格的输入等,也可以结合其它组件构建功能页面,例如登录注册页面。

图片来源黑马程序员

Text组件的使用:

文本显示组件有两种方式,一种是字符串string,一种是读取指定的string格式的字符串!

可以实现,根据限定词,切换指定的国家语言,从而实现设备走向国家化!

Textinput组件的使用:

TextInput有5种可选类型,分别为Normal基本输入模式、Password密码输入模式、Email邮箱地址输入模式、Number纯数字输入模式、PhoneNumber电话号码输入模式。

设置无输入时的提示文本。

TextInput({placeholder:'我是提示文本'})

设置输入框当前的文本内容。

添加backgroundColor改变输入框的背景颜色。

源码部分如下:

@Entry
@Component
struct Index2 {@State imageWidth: number = 100build() {Column() {Row(){Image($r('app.media.icon')).width(this.imageWidth)//控制图片的大小}.width('100').height("100").justifyContent(FlexAlign.Center)Row(){Text($r('app.string.width_label')).fontSize(20).fontWeight(FontWeight.Bold)TextInput({text: this.imageWidth.toFixed(0)}).width(150).backgroundColor('#FFF').type(InputType.Number).onChange( value => {    //获取输入this.imageWidth = parseInt(value)})}.width('100%').padding({left: 14, right: 14}).justifyContent(FlexAlign.SpaceBetween)Divider().width('91%')Row(){Button('缩小').width(80).fontSize(20).onClick(() => {if(this.imageWidth >= 10){this.imageWidth -= 10}})Button('放大').width(80).fontSize(20).onClick(() => {if(this.imageWidth < 300){this.imageWidth += 10}})}.width('100%').margin({ top: 35, bottom: 35 }).justifyContent(FlexAlign.SpaceEvenly)Slider({min: 100,max: 300,value: this.imageWidth,step: 10,}).width('100%').blockColor('#36D').trackThickness(5).showTips(true).onChange(value => {this.imageWidth = value})}.width('100%').height('100%')}
}

文本框主要用于获取用户输入的信息,把信息处理成数据进行上传,绑定onChange事件可以获取输入框内改变的内容。

场景示例

用于表单的提交,在用户登录/注册页面,用户的登录或注册的输入操作。

TextInput().onChange((value: string) => {console.info(value);}).onFocus(() => {console.info('获取焦点');})

TextArea(该组件从API Version 7开始支持。)

多行文本输入框组件,当输入的文本内容超过组件宽度时会自动换行显示。

除支持通用事件外(通用事件包含:宽高,内外边距。),还支持以下事件:

onCopy(callback:(value: string) => void)长按输入框内部区域弹出剪贴板后,点击剪切板复制按钮,触发该回调。当设置CopyOptions.None时,当前TextArea中的文字无法被复制或剪切,仅支持粘贴。

onCut(callback:(value: string) => void)长按输入框内部区域弹出剪贴板后,点击剪切板剪切按钮,触发该回调。

onPaste(callback:(value: string) => void)长按输入框内部区域弹出剪贴板后,点击剪切板粘贴按钮,触发该回调。

caretPosition(value: number): void    可以设置光标的位置。

示例代码如下:

// xxx.ets
@Entry
@Component
struct TextAreaExample {@State text: string = ''controller: TextAreaController = new TextAreaController()build() {Column() {TextArea({placeholder: 'The text area can hold an unlimited amount of text. input your word...',controller: this.controller}).placeholderFont({ size: 16, weight: 400 })//设置placeholder文本样式,包括字体大小,字体粗细,字体族,字体风格。目前仅支持默认字体族。.width(336).height(56).margin(20).fontSize(16).fontColor('#182431').backgroundColor('#FFFFFF').onChange((value: string) => {this.text = value})Text(this.text)Button('Set caretPosition 1').backgroundColor('#007DFF')//背景颜色.margin(15)//边距.onClick(() => {// 设置光标位置到第一个字符后this.controller.caretPosition(1)})}.width('100%').height('100%').backgroundColor('#F1F3F5')}
}

以上信息,来自官网手册

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

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

相关文章

Spring Cloud + Vue前后端分离-第4章 使用Vue cli 4搭建管理控台

Spring Cloud Vue前后端分离-第4章 使用Vue cli 4搭建管理控台 4-1 使用vue cli创建admin项目 Vue 简介 Vue作者尤雨溪在google工作时&#xff0c;最早只想研究angular的数据绑定功能&#xff0c;后面觉得这个小功能很好用&#xff0c;有前景&#xff0c;就再扩展&#xff…

[MySQL] MySQL复合查询(多表查询、子查询)

前面我们学习了MySQL简单的单表查询。但是我们发现&#xff0c;在很多情况下单表查询并不能很好的满足我们的查询需求。本篇文章会重点讲解MySQL中的多表查询、子查询和一些复杂查询。希望本篇文章会对你有所帮助。 文章目录 一、基本查询回顾 二、多表查询 2、1 笛卡尔积 2、2…

教师未来发展前景如何

作为一名教师&#xff0c;我对未来发展的前景也感到有些迷茫。 不过教育行业仍然是一个稳定的职业&#xff0c;但是随着社会的变化和科技的发展&#xff0c;传统的教学模式已经逐渐被在线教育、人工智能等新型教学方式所取代。这使得教师的角色和职责也在发生变化&#xff0c;需…

matplot绘图时图像太大报错但能保存

matplot绘图时&#xff0c;图像太大&#xff0c;可能在jupyter里面报错&#xff0c;但是图像可以保存。 报错&#xff1a;Image size of 12237479x675 pixels is too large. It must be less than 2^16 in each direction. 在这里插入图片描述

SpringIOC第二课,@Bean用法,DI详解,常见面试题Autowired VS Resource

一、回顾 但是我们之前MVC时候&#xff0c;在页面上&#xff0c;为什只用Controller,不用其他的呢&#xff1f; 用其他的好使吗&#xff1f;(我们可以在这里看到&#xff0c;出现404的字样&#xff09; Service ResponseBody public class TestController {RequestMapping(&quo…

kubernetes安装kubesphere

前置默认都安装了k8s&#xff0c;且k8s都正常 1、nfs文件系统 1.1、安装nfs-server # 在每个机器。 yum install -y nfs-utils# 在master 执行以下命令 echo "/nfs/data/ *(insecure,rw,sync,no_root_squash)" > /etc/exports# 执行以下命令&#xff0c;启动 …

数字化和数智化一字之差,究竟有何异同点?

在2023杭州云栖大会的一展台内&#xff0c;桌子上放着一颗番茄和一个蛋糕&#xff0c;一旁的机器人手臂融入“通义千问”大模型技术后&#xff0c;变得会“思考”&#xff1a;不仅能描述“看”到了什么&#xff0c;还能确认抓取的是番茄而不是蛋糕。 “传统的机械臂通常都只能基…

Post Quantum Fuzzy Stealth Signatures and Applications

目录 笔记后续的研究方向摘要引言贡献模块化框架模糊构造实施适用于FIDO Post Quantum Fuzzy Stealth Signatures and Applications CCS 2023 笔记 后续的研究方向 摘要 自比特币问世以来&#xff0c;基于区块链的加密货币中的私人支付一直是学术和工业研究的主题。隐形地址…

cmd命令 常用的命令

网络工作为常年公司里的背锅侠&#xff0c;不得不集齐十八般武艺很难甩锅。像cmd命令这种好用又好上手的技术&#xff0c;就是网络工程师上班常备技能。 只要按下快捷键 winR&#xff0c;输入cmd回车&#xff0c;然后输入cmd命令。 像我自己&#xff0c;我就经常用cmd命令检测…

浪潮信息KeyarchOS——保卫数字未来的安全防御利器

浪潮信息KeyarchOS——保卫数字未来的安全防御利器 前言 众所周知&#xff0c;目前流行的操作系统有10余种&#xff0c;每一款操作系统都有自己的特点。作为使用者&#xff0c;我们该如何选择操作系统。如果你偏重操作系统的安全可信和稳定高效&#xff0c;我推荐你使用浪潮信…

openEuler JDK21 部署 Zookeeper 集群

zookeeper-jdk21 操作系统&#xff1a;openEuler JDK&#xff1a;21 主机名IP地址spark01192.168.171.101spark02192.168.171.102spark03192.168.171.103 安装 1. 升级内核和软件 yum -y update2. 安装常用软件 yum -y install gcc gcc-c autoconf automake cmake make \zl…

E: 无法获得锁 /var/lib/dpkg/lock-frontend。锁正由进程 6253(apt-get)持有

问题 解决方案 sudo rm /var/lib/dpkg/lock-frontend接着&#xff0c;继续安装。

【复杂网络建模】——基于Graph Convolutional Networks (GCN)进行链接预测

目录 一、复杂网络建模 二、图嵌入方法&#xff08;Graph Convolutional Networks (GCN) &#xff09; 1. 图表示&#xff1a; 2. 邻接矩阵&#xff08;Adjacency Matrix&#xff09;&#xff1a; 3. 图卷积层&#xff08;Graph Convolutional Layer&#xff09;&#xff…

【C语言】7-32 刮刮彩票 分数 20

7-32 刮刮彩票 分数 20 全屏浏览题目 切换布局 作者 DAI, Longao 单位 杭州百腾教育科技有限公司 “刮刮彩票”是一款网络游戏里面的一个小游戏。如图所示&#xff1a; 每次游戏玩家会拿到一张彩票&#xff0c;上面会有 9 个数字&#xff0c;分别为数字 1 到数字 9&#xf…

排序-插入排序与希尔排序

文章目录 一、插入排序二、希尔排序 一、插入排序 思路&#xff1a; 当插入第i(i>1)个元素时&#xff0c;前面的array[0],array[1],…,array[i-1]已经排好序&#xff0c;此时用array[i]的排序码与array[i-1],array[i-2],…的排序码顺序进行比较&#xff0c;找到插入位置即将…

基于Springboot+mybatis+mysql+jsp招聘网站

基于Springbootmybatismysqljsp招聘网站 一、系统介绍二、功能展示四、其他系统实现五、获取源码 一、系统介绍 项目类型&#xff1a;Java EE项目 项目名称&#xff1a;基于SPringBoot的照片网站 项目架构&#xff1a;B/S架构 开发语言&#xff1a;Java语言 前端技术&…

Swagger Array 逐步解密:带你简化开发工作

Swagger 允许开发者定义 API 的路径、请求参数、响应和其他相关信息&#xff0c;以便生成可读性较高的文档和自动生成客户端代码。而 Array &#xff08;数组&#xff09;是一种常见的数据结构&#xff0c;用于存储和组织多个相同类型的数据元素。数组可以有不同的维度和大小&a…

轨道电流检测IC——FP355,助力蓄电池充电器、SPS(适配器)、电池管理系统、多口快充充电器的优雅升级

目录 一、FP355概述 二、FP355特点 三、FP355应用 随着移动设备的普及和人们对电力需求的不断增长&#xff0c;充电器的安全性和充电效率成为了重要的关注点。 作为一种能够精确检测电流的集成电路&#xff0c;轨道电流检测IC——FP355是个不错的选择。它不仅广泛应用于蓄电…

SpringBoot集成Spring Security+jwt+kaptcha验证(简单实现,可根据实际修改逻辑)

参考文章 【全网最细致】SpringBoot整合Spring Security JWT实现用户认证 需求 结合jwt实现登录功能&#xff0c;采用自带/login接口实现权限控制 熟悉下SpringSecurity SpringSecurity 采用的是责任链的设计模式&#xff0c;是一堆过滤器链的组合&#xff0c;它有一条很…

03_W5500TCP_Client

上一节我们完成了W5500网络的初始化过程&#xff0c;这节我们进行TCP通信&#xff0c;w5500作为TCP客户端与电脑端的TCP_Server进行通信。 目录 1.TCP通信流程图&#xff1a; tcp的三次握手&#xff1a; tcp四次挥手&#xff1a; 2.代码分析&#xff1a; 3.测试&#xff1a…