ArkTS-ArkUI组件-TextInput组件

 一.官方文档

TextInput官方文档，可以参考学习哦。

二.基本语法

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

这么多参数是不是看了头大啊 ，我们先来看一下文档里是怎么说的吧！

参数名	参数类型	必填	参数描述
placeholder	ResourceStr	否	设置无输入时的提示文本。
text	ResourceStr	否	设置输入框当前的文本内容。当组件设置stateStyles等刷新属性时，建议通过onChange事件将状态变量与文本实时绑定，避免组件刷新时TextArea中的文本内容异常。
controller8+	TextInputController	否	设置TextInput控制器。

 看了文档是不是就悟了啊！还是得看文档。

接下来我们来看看前面两个参数的使用吧！！！

 placeholder：输入框无输入时的提示信息

TextInput({placeholder: '你想提示的信息'})

 使用起来是不是很简单啊！

 还有个text参数大家是不是都已经猜到怎么用啦！

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

TextInput({text: 'HarmonyOS'})

 是不是特别简单啊，接下来我们看看一些常用的属性吧！

三.属性 

type：输入框类型 

名称	参数类型	描述
type	InputType	设置输入框类型。 默认值：InputType.Normal

 下面我们来仔细看一下参数类型InputType吧：

InputType枚举说明

名称	描述
Normal	基本输入模式。 支持输入数字、字母、下划线、空格、特殊字符。
Password	密码输入模式。支持输入数字、字母、下划线、空格、特殊字符。密码显示小眼睛图标并且默认会将文字变成圆点。
Email	邮箱地址输入模式。支持数字，字母，下划线，以及@字符（只能存在一个@字符）。
Number	纯数字输入模式。
PhoneNumber9+	电话号码输入模式。 支持输入数字、+ 、-、*、#，长度不限。

 是不是看完表格觉得自己已经可以了！！！那我们就简单介绍一下吧（以Password为例）。

password

TextInput({placeholder:'在这里输入哦！'})
  .type(InputType.Password)

 我们来看看最终的样子吧：

是不是隐藏密码一下子规格就上来啦！！！ 

点击这个小眼睛图标密码就又显示出来啦！！！

下面我们在来看看其他属性吧！！！

placeholderColor/placeholderFont

名称	参数类型	描述
placeholderColor	ResourceColor	设置placeholder文本颜色。
placeholderFont	Font	设置placeholder文本样式。

这是不是太简单了，不就设置颜色和样式嘛，肯定轻轻松松啊！

那我们来看看吧！！！

怎么回事？？？为什么颜色没有变啊？？？ 

让我们再次回去看看文档——》 

 

还记得这是什么吗？？？——》输入框的提示信息啊，那我们现在有提示信息吗？所以就算颜色发生了改变我们也看不见。。。

看文档要仔细 

作为一个交互的组件，我们如何进行交互知道用户输入了些什么呢？？？ 

最后我们再来讲一个事件吧！！！

四.事件 

事件：

名称	功能描述
onChange(callback: (value: string) => void)	输入内容发生变化时，触发该回调。 value：输入的文本内容。 触发该事件的条件： 1、键盘输入。 2、粘贴、剪切。 3、键盘快捷键Ctrl+v。

我们直接上实例吧——》 

先来个插曲吧，当箭头函数只有一个参数的情况下可以省略（ ），直接写value。

在日志中输出文本框的内容：

TextInput({text: 'H'})
  .backgroundColor(Color.Pink)
  .fontSize(30)
  .margin({top: 300})
  .onChange(value =>{
    console.log(value)

  })

下面我们直接在输入框中输入看看效果吧————》

  onChange状态是不是在线啊

 接下来我们就来看看是如何进行交互的吧：

注意：读取变量使用this.

 将输入框的内容赋给message变量(parseInt()——》转整形)，再将message变量作为文本框内容输出。

TextInput({text: this.message.toFixed(0)})————》将输入框初值设置为message。

让我们改变输入框的内容，看看文本框有没有发生改变吧！！！ 

改变输入框内容发现文本框也随之一起改变。这就是onChange交互事件——》输入内容发生变化时，触发该回调。

五.语录

坚持就是成功的敲门砖，持之以恒才能看到希望的曙光。

 一天一个小知识，每一个都是通往成功路上的脚印！！！