> 语法
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%')
}
}