ArkUI TextInput组件

TextInput

根据组件名字,可以得知他是一个文本输出框。

声明代码👇

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

placeholder: 就是提示文本,跟网页开发中的placeholder一样的

text:输入框当前的文本内容
特殊属性:

type(inputType.xxx). 可以决定输入框的类型,xxx的值有Normal、password(密码,会加密)、Email(邮箱格式)、Number(纯数字)等

注意: 只做约束,不做校验。
输入框可以使用事件来控制用户的交互操作。

测试

使用placeholder来控制未输入时的提示信息

使用type控制输入的类型,比如使用密码

当然,我们也可以是对他设置基本样式,比如背景色,宽度等

最重要的,我们可以通过事件来处理逻辑

TypeScript 复制代码
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    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的语法相似。

TypeScript 复制代码
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State imageWidth: number = 30
  build() {
    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%')
  }
}
相关推荐
安卓开发者7 小时前
鸿蒙NEXT应用接入快捷栏:一键直达,提升用户体验
java·harmonyos·ux
HMS Core7 小时前
消息推送策略:如何在营销与用户体验间找到最佳平衡点
华为·harmonyos·ux
Brianna Home8 小时前
【案例实战】鸿蒙分布式调度:跨设备协同实战
华为·wpf·harmonyos
Bert丶seven8 小时前
鸿蒙Harmony实战开发教学(No.4)-RichText组件基础到高阶介绍篇
华为·harmonyos·arkts·鸿蒙·鸿蒙系统·arkui·开发教程
鸿蒙小白龙9 小时前
openharmony之分布式蓝牙实现多功能场景设备协同实战
分布式·harmonyos·鸿蒙·鸿蒙系统·open harmony
爱吃水蜜桃的奥特曼10 小时前
玩Android Harmony next版,通过项目了解harmony项目快速搭建开发
android·harmonyos
鸿蒙小白龙11 小时前
openharmony之分布式购物车开发实战
分布式·harmonyos·鸿蒙·鸿蒙系统·open harmony
鸿蒙小白龙11 小时前
openharmony之分布式相机开发:预览\拍照\编辑\同步\删除\分享教程
分布式·harmonyos·鸿蒙·鸿蒙系统·open harmony
安卓开发者13 小时前
鸿蒙NEXT鼠标光标开发完全指南
华为·计算机外设·harmonyos
●VON19 小时前
重生之我在大学自学鸿蒙开发第九天-《分布式流转》
学习·华为·云原生·harmonyos·鸿蒙