手机网站开发程序员,为shopify做推广的网站,建筑人才网和建筑英才网i猎聘,为把网站建设更好TextInput 根据组件名字#xff0c;可以得知他是一个文本输出框。 声明代码#x1f447; TextInput({placeholder?:ResourceStr,text?:ResourceStr}); placeholder: 就是提示文本#xff0c;跟网页开发中的placeholder一样的 text#xff1a;输入框当前的文本内容 特殊属…TextInput 根据组件名字可以得知他是一个文本输出框。 声明代码 TextInput({placeholder?:ResourceStr,text?:ResourceStr}); placeholder: 就是提示文本跟网页开发中的placeholder一样的 text输入框当前的文本内容 特殊属性 type(inputType.xxx). 可以决定输入框的类型xxx的值有Normal、password(密码会加密)、Email(邮箱格式)、Number(纯数字)等 注意 只做约束不做校验。 输入框可以使用事件来控制用户的交互操作。 测试 使用placeholder来控制未输入时的提示信息 使用type控制输入的类型比如使用密码 当然我们也可以是对他设置基本样式比如背景色宽度等 最重要的我们可以通过事件来处理逻辑 Entry
Component
struct Index {State message: string Hello Worldbuild() {Row() {Column() {Image($r(app.media.hongmeng)).width(250)Text($r(app.string.width_label)).fontSize(30).fontWeight(FontWeight.Medium)TextInput({placeholder:请输入图片宽度:}).type(InputType.Password).width(300).backgroundColor(#ff0000).onChange(e{console.log(e)})}.width(100%)}.height(100%)}
} 通过事件交互进行图片宽度的改变 我们通过交互事件将用户输入的数字大小赋值给imageWidth变量再将image组件的width变成响应式的变量来完成这一操作。不过在其中要注意类型的转换。因为textinput的text属性需要的是一个字符串类型的但是imageWidth是一个数字类型的所以在使用的时候要考虑类型的转换。这里我使用了Number()和toString()强转。与javascript的语法相似。 Entry
Component
struct Index {State message: string Hello WorldState imageWidth: number 30build() {Row() {Column() {Image($r(app.media.hongmeng)).width(this.imageWidth)Text($r(app.string.width_label)).fontSize(30).fontWeight(FontWeight.Medium)TextInput({text:this.imageWidth.toString()}).type(InputType.Number).width(150).backgroundColor(#ff0000).onChange(e{this.imageWidth Number(e)})}.width(100%)}.height(100%)}
}
