一、TextInput/TextArea

TextInput和TextArea组件通常用于收集用户输入的文本数据。

TextInput组件通常用于单行文本的输入,它允许用户通过一个光标来输入文字,并支持多种样式和布局选项来提高用户体验。例如,在用户输入错误时可以显示错误消息或在用户输入时自动完成文本。

TextArea组件与TextInput类似,但允许用户输入多行文本,它通常具有更大的输入框和滚动条来浏览输入的文本。Textarea组件也支持多种样式和布局选项,例如自动调整输入区域的大小以适应输入的文本,以及支持大于输入区域的文本滚动。

无论是TextInput还是TextArea,它们都使用onChange事件来检测文本输入的变化,并将输入的文本作为属性传递到父组件或应用程序。这些组件也可以在需要时收集其他的表单数据,例如表单提交时需要发送的数据。

1.创建输入框

语法说明:

TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController})
TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})

使用:

// xxx.ets
@Entry
@Component
struct Index {
build() {
Column() {
TextArea({text:"我是TextArea我是TextArea我是TextArea我是TextArea"}).width(300)
}.width('100%')
}
}

2.设置输入框类型

// xxx.ets
@Entry
@Component
struct Index {
build() {
Column() {
TextInput()
.type(InputType.Normal)
TextInput()
.type(InputType.Password)
}.width('100%')
}
}

3.自定义样式

// xxx.ets
@Entry
@Component
struct Index {
build() {
Column() {
TextInput({placeholder:'我是提示文本'})
TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'})
TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'})
.backgroundColor(Color.Pink)
}.width('100%')
}
}

4.添加事件

// xxx.ets
@Entry
@Component
struct Index {
build() {
Column() {
TextInput()
.onChange((value: string) => {
console.info(value);
})
.onFocus(() => {
console.info('获取焦点');
})
}.width('100%')
}
}

5.案例

登录界面是一种用于认证用户身份的界面。当用户访问需要身份验证的网站、应用程序或系统时,他们通常需要输入其用户名和密码来登录。登录界面通常包括一个输入框,以便用户输入其用户名或电子邮件地址,以及一个密码输入框,用于输入其密码。有些登录界面甚至还可包括验证码输入框或其他安全信息,以提高安全性。

登录界面是Web和移动应用程序中常见的界面元素,因为它们允许应用程序和网站保护其用户的个人信息和数据。登录界面通常需要正确的用户名和密码才能访问应用程序或网站。登录后,应用程序或网站将与该用户关联,并在以后的访问中保持登录状态,使用户能够轻松地访问其个人信息和数据。

@Entry
@Component
struct TextInputSample {
build() {
Column() {
TextInput({ placeholder: 'input your username' }).margin({ top: 20 })
.onSubmit((EnterKeyType)=>{
console.info(EnterKeyType+'输入法回车键的类型值')
})
TextInput({ placeholder: 'input your password' }).type(InputType.Password).margin({ top: 20 })
.onSubmit((EnterKeyType)=>{
console.info(EnterKeyType+'输入法回车键的类型值')
})
Button('Sign in').width(150).margin({ top: 20 })
}.padding(20)
}
}

写在最后

  • 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
  • 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
  • 关注小编,同时可以期待后续文章ing,不定期分享原创知识。
  • 更多鸿蒙最新技术知识点,请关注作者博客:https://t.doruo.cn/14DjR1rEY

鸿蒙HarmonyOS实战-ArkUI组件(TextInput/TextArea)的更多相关文章

  1. 鸿蒙的远程交互组件应用及微信小程序的远程交互组件应用

    注:鸿蒙的远程交互组件应用相对复杂 ,访问网络时,首先要配置网络权限,华为官方文档有问题,在此引用我老师配置的模板,见附件 过程:1.导入鸿蒙的网络请求模块fetch 2.发起对服务器的请求(在这过程 ...

  2. 微信小程序入门与实战 常用组件API开发技巧项目实战*全

    第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...

  3. 手把手带你体验鸿蒙 harmonyOS

    wNlRGd.png 前言 本文已经收录到我的 Github 个人博客,欢迎大佬们光临寒舍: 我的 GIthub 博客 学习导图 image.png 一.为什么要尝鲜 harmonyos? wNlfx ...

  4. 最全华为鸿蒙 HarmonyOS 开发资料汇总

    开发 本示例基于 OpenHarmony 下的 JavaScript UI 框架,进行项目目录解读,JS FA.常用和自定义组件.用户交互.JS 动画的实现,通过本示例可以基本了解和学习到 JavaS ...

  5. 鸿蒙HarmonyOS应用开发落地实践,Harmony Go 技术沙龙落地北京

    12月26日,华为消费者BG软件部开源中心与51CTO Harmony OS技术社区携手,共同主办了主题为"Harmony OS 应用开发落地实践"的 Harmony Go 技术沙 ...

  6. 鸿蒙开源第三方件组件——轮播组件Banner

    目录: 1.功能展示 2.Sample解析 3.Library解析 4.<鸿蒙开源第三方组件>系列文章合集 前言 基于安卓平台的轮播组件Banner(https://github.com/ ...

  7. React Native随笔——组件TextInput

    一.实例 先看一下我要做的搜索框的样子 需要一个Image,和一个TextInput 去掉默认下划线 underlineColorAndroid='transparent' 设置光标颜色 select ...

  8. 14-Flutter移动电商实战-ADBanner组件的编写

    拨打电话的功能在app里也很常见,比如一般的外卖app都会有这个才做.其实Flutter本身是没给我们提供拨打电话的能力的,那我们如何来拨打电话那? 1.编写店长电话模块 这个小伙伴们一定轻车熟路了, ...

  9. 13-Flutter移动电商实战-ADBanner组件的编写

    1.AdBanner组件的编写 我们还是把这部分单独出来,需要说明的是,这个Class你也是可以完全独立成一个dart文件的.代码如下: 广告图片class AdBanner extends Stat ...

  10. iview实战 : 树形组件自定义

    Tree树形组件是 iview 中相对复杂的一个组件. 自定义节点内容 使用强大的 Render 函数可以自定义节点显示内容和交互,比如添加图标,按钮等. ——官方文档 但官方的 example 只有 ...

随机推荐

  1. java图书管理系统

    一 .需求 1.使用数组存储学生(学号.姓名.性别.年级.院系.班级)信息数据和图书(书号.书名.出版日期.作者.价格.类别)信息数据 2.学生管理功能:增加学生.删除学生信息.修改学生信息.查询学生 ...

  2. ASP.NET 读取FTP文件流

    参考资料 ASP.NET 上传文件到共享文件夹 工具类代码 /// <summary> /// 读取ftp文件流 /// </summary> /// <param na ...

  3. Nebula Graph 源码解读系列 | Vol.04 基于 RBO 的 Optimizer 实现

    上篇我们讲述了一个执行计划是如何生成的,这次我们来看下这个生成的执行计划是被 Optimizer 优化的. 概述 Optimizer,优化器,顾名思义就是一个用来优化执行计划的组件.数据库的优化器通常 ...

  4. 测绘线性代数(四):数学期望、协方差、PCA

    数学期望 E(X) = ∑pixi,X为所有xi的集合,pi为xi对应的概率. 通常来说,xi都是离散的,除非像高斯分布,假设xi不是离散的,才用上式. 当xi是离散的,那么: E(X) = 1 / ...

  5. [MAUI 项目实战] 音乐播放器(二):播放内核

    播放控制服务 IMusicControlService: 播放控制类,用于当前平台播放器对象的操作,对当前所播放曲目的暂停/播放,下一首/上一首,快进快退(寻迹),随机.单曲模式等功能的控制. 播放控 ...

  6. Java中枚举配合switch语句用法-2022新项目

    一.业务场景 项目开发中经常会遇到多条件判断的情况,如果判断条件少的话使用if/elseif/else还比较好处理,如果判断条件多的话,则在使用这种语句就不太合适. 如果是自定义的一些内容,比如不同的 ...

  7. iptables五表五链及对应实例

    iptables是Linux系统上用于配置网络包过滤规则的工具,它使用表(tables)和链(chains)来组织规则.以下是iptables中的五表五链及其对应的实例说明: 五表 filter表:默 ...

  8. 回声消除AEC(Acoustic Echo Cancellation)概括介绍及基本原理分析

    回声消除的基本概念   回音消除(Acoustic Echo Cancelling)是透过音波干扰方式消除麦克风与喇叭因空气产生回受路径(feedback path)而产生的杂音.通俗一点来说,回声消 ...

  9. Ubuntu 16.04 LAMP(PHP7.0) 环境搭建并测试

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文作为本人csdn blog的主站的备份.(Bl ...

  10. 走进volatile的世界,探索它与可见性,有序性,原子性之间的爱恨情仇!

    写在开头 在之前的几篇博文中,我们都提到了 volatile 关键字,这个单词中文释义为:不稳定的,易挥发的,在Java中代表变量修饰符,用来修饰会被不同线程访问和修改的变量,对于方法,代码块,方法参 ...