鸿蒙开发组件之TextInput

最新推荐文章于 2025-01-17 14:47:08 发布

Lu_Ca

最新推荐文章于 2025-01-17 14:47:08 发布

阅读量1.6k

点赞数 10

分类专栏：鸿蒙开发文章标签：鸿蒙

本文链接：https://blog.youkuaiyun.com/Lu_Ca/article/details/134884261

版权

鸿蒙开发专栏收录该内容

42 篇文章

订阅专栏

本文详细介绍了鸿蒙开发中的TextInput组件，包括初始化方式、placeholder国际化、密码输入设置、监听内容变化和注意事项，特别提到了处理空值和类型转换的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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类型。