当前位置:   article > 正文

HarmonyOS 组件4--TextInput文本输入框_harmony textinput提示文本

harmony textinput提示文本

> 语法

TextInput({placeholder?:ResourceStr,text?:ResourceStr})

1. placeholder:
    占位符,输入框没有输入的时候提示文本
    `TextInput({placeholder:"请输入文本"})`
2. text
    输入框当前的文本内容,输入框的默认值
    `TextInput({text:'itcast'})`
3. 常用的属性方法

  1. TextInput({placeholder:"请输入文本"}) // 带占位符的文本输入框
  2. .width('90%') // 宽度
  3. .height(100) // 高度
  4. .backgroundColor('#fff') // 类型
  5. .type(InputType.Password) // 输入框的类型 Password、Normal、Email、Number、PhoneNumber
  6. .onChange(value=>{
  7. if (value == 'hello') {
  8. console.log(value)
  9. }
  10. })

>一些需要注意的细节

1. 占位符和默认文本
占位符的作用是在文本框内显示一些提示文字,而默认文本会占用占位符的位置,直接显示默认文本的内容。

TextInput({placeholder:"请输入文本",text:"1234"}) // 带占位符的文本输入框  

2. onChange事件属性
使用onChange事件,可以在文本输入框内改变文本时触发,可以用于密码校验等,同时将文本框中的值传给Value变量,方便后续针对Value进行逻辑判断或操作。

  1. .onChange(value=>{
  2. // if (value == 'hello') {
  3. //console.log(value)
  4. // }
  5. // 在这里写需要对Value进行的操作和逻辑判断
  6. })

>小案例:用户输入图片尺寸调整图片大小

  1. @Entry
  2. @Component
  3. struct Index {
  4. // 声明一个变量,用于后续给图片读取变量的值改变尺寸
  5. @State imageWidth : number = 200
  6. build() {
  7. Row() {
  8. Column() {
  9. // 图片
  10. Image($r('app.media.image')) // 图片路径
  11. .width(this.imageWidth) // 宽度 读取imageWidth变量
  12. .height(200) // 高度
  13. .borderRadius(20) // 图片切圆角
  14. //文本输入框
  15. TextInput({placeholder:"请输入图片宽度"}) // 带占位符的文本输入框
  16. .width('90%') // 宽度
  17. .height(100) // 高度
  18. .backgroundColor('#fff') // 颜色
  19. .type(InputType.Number) // 输入框的类型 由于是图片尺寸所以使用Number
  20. .onChange(value=>{ // 当用户更改文本时,触发修改图片尺寸
  21. console.log('图片的尺寸是:',value,'vpx') // 控制台打印
  22. this.imageWidth = parseInt(value) // 将Value值从string类型转换为int类型,然后赋值给imageWidth
  23. })
  24. }
  25. .width('100%')
  26. }
  27. .height('100%')
  28. }
  29. }
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Monodyee/article/detail/247906
推荐阅读
相关标签
  

闽ICP备14008679号