TextInput组件作为鸿蒙开发的输入框组件

1、初始化方式是

//placeholder 与 text都是可选类型
TextInput({placeholder:'xxx',text:'xxxxx'})

2、placeholder支持国际化

在Text中，通过读取string文件中文本来完成国际化，同理，placeholder也可以这样处理

TextInput({placeholder:$r('app/string/xxxx'),text:'xxx'})

3、内容是密码输入

TextInput可以通过style属性来设置是否是密码输入框，以及文本的是数字、email等内容

TextInput({placeholder:'hello'})
    .type(InputType.Password)

4、监听输入框内容的改变可以通过onchange方法

TextInput({placeholder:'xxxx'})
    .onchange(value => {
        console.log(value)
    })

5、注意

需要注意的是如果我们在删除输入框的内容为null时，输入框内容会变成NAN，之后就不可以再输入了。所以，我们可以在处理value的时候可以加上判断

TextInput({placeholder:$r('app.string.imageWidth_label'),text:this.imageWidth.toFixed(0)})
            .fontSize(30)
            .backgroundColor('#4d5f6c')
            .type(InputType.Number)
            .width(150)
            .onChange( value => {
              console.log(value)
              if (value) {
                this.imageWidth = parseInt(value)
              }
            })

我们在拿到value的时候通过if判断来给imageWidth属性赋值。并把字符串类型的value通过parseInt函数转成了Int类型。