赞
踩
TextInput({placeholder?:ResourceStr,text?:ResourceStr})
1. placeholder:
占位符,输入框没有输入的时候提示文本
`TextInput({placeholder:"请输入文本"})`
2. text
输入框当前的文本内容,输入框的默认值
`TextInput({text:'itcast'})`
3. 常用的属性方法
- TextInput({placeholder:"请输入文本"}) // 带占位符的文本输入框
- .width('90%') // 宽度
- .height(100) // 高度
- .backgroundColor('#fff') // 类型
- .type(InputType.Password) // 输入框的类型 Password、Normal、Email、Number、PhoneNumber
- .onChange(value=>{
- if (value == 'hello') {
- console.log(value)
- }
- })
1. 占位符和默认文本
占位符的作用是在文本框内显示一些提示文字,而默认文本会占用占位符的位置,直接显示默认文本的内容。
TextInput({placeholder:"请输入文本",text:"1234"}) // 带占位符的文本输入框
2. onChange事件属性
使用onChange事件,可以在文本输入框内改变文本时触发,可以用于密码校验等,同时将文本框中的值传给Value变量,方便后续针对Value进行逻辑判断或操作。
- .onChange(value=>{
- // if (value == 'hello') {
- //console.log(value)
- // }
- // 在这里写需要对Value进行的操作和逻辑判断
- })
- @Entry
- @Component
- struct Index {
- // 声明一个变量,用于后续给图片读取变量的值改变尺寸
- @State imageWidth : number = 200
- build() {
- Row() {
- Column() {
- // 图片
- Image($r('app.media.image')) // 图片路径
- .width(this.imageWidth) // 宽度 读取imageWidth变量
- .height(200) // 高度
- .borderRadius(20) // 图片切圆角
- //文本输入框
- TextInput({placeholder:"请输入图片宽度"}) // 带占位符的文本输入框
- .width('90%') // 宽度
- .height(100) // 高度
- .backgroundColor('#fff') // 颜色
- .type(InputType.Number) // 输入框的类型 由于是图片尺寸所以使用Number
- .onChange(value=>{ // 当用户更改文本时,触发修改图片尺寸
- console.log('图片的尺寸是:',value,'vpx') // 控制台打印
- this.imageWidth = parseInt(value) // 将Value值从string类型转换为int类型,然后赋值给imageWidth
- })
- }
- .width('100%')
- }
- .height('100%')
- }
- }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。