鸿蒙开发之ArkUI组件常用组件文本输入

TextInput、TextArea是输入框组件，通常用于响应用户的输入操作，比如评论区的输入、聊天框的输入、表格的输入等，也可以结合其它组件构建功能页面，例如登录注册页面。

TextInput为单行输入框、TextArea为多行输入框

TextArea

多行文本输入框组件，当输入的文本内容超过组件宽度时会自动换行显示。

高度未设置时，组件无默认高度，自适应内容高度。宽度未设置时，默认撑满最大宽度。

接口  

TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController})

参数：  

placeholder 是占位符，ResourceStr (分为string字符串类型和Resource资源引用类型，引入系统资源或者应用资源中的字符串)

text是文本内容，也是ResourceStr类型的

controller 设置TextArea控制器，对于TextAreaController 类型，官方给出的解释

TextArea组件的控制器，目前可通过它设置TextArea组件的光标位置，调用caretPosition(value: number) 设置光标位置

属性

        除支持通用属性外，还支持以下属性：

通用属性padding的默认值为：

{

top: 8 vp,

right: 16 vp,

bottom: 8 vp,

left: 16 vp

}

事件

除支持通用事件外，还支持以下事件：

案例

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State value:string = "123"
  @State placeholder:string = "palceholder"
  @State text: string = ''
  controller: TextAreaController = new TextAreaController()
  build() {
    Row() {
      Column() {

        TextArea({
          placeholder: 'input your word...',
          controller: this.controller
        })
          .placeholderColor("#00FF00")
          .placeholderFont({ size: 16, weight: 400 })
          .width(336)
          .height(56)
          .margin(20)
          .fontSize(16)
          .fontColor('#182431')
          .backgroundColor('#FFFFFF')
          .onChange((value: string) => {
            this.text = value
          })
        Text(this.text)
        Button('Set caretPosition 1')
          .backgroundColor('#007DFF')
          .margin(15)
          .onClick(() => {
            // 设置光标位置到第一个字符后
            this.controller.caretPosition(10)
          })

      }
      .width('100%')
    }
    .height('100%')
  }
}

TextInput

单行文本输入框组件

接口

TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})

参数

参数placeholder和text 与TextArea是一样的

controller是TextInputController （TextInput组件的控制器），同样可以设置输入光标的位置

属性

除支持通用属性外，还支持以下属性：

其中 EnterKeyType枚举说明

InputType枚举说明

TextInputStyle9+枚举说明

事件

除支持通用事件外，还支持以下事件：

案例

@Entry
@Component
struct TextInputExample {
  @State text: string = ''
  controller: TextInputController = new TextInputController()

  build() {
    Column() {
      TextInput({ text: this.text, placeholder: 'input your word...', controller: this.controller })
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 14, weight: 400 })
        .caretColor(Color.Blue)
        .width(400)
        .height(40)
        .margin(20)
        .fontSize(14)
        .fontColor(Color.Black)
        .inputFilter('[a-z]', (e) => {
          console.log(JSON.stringify(e))
        })
        .onChange((value: string) => {
          this.text = value
        })
      Text(this.text)
      Button('Set caretPosition 1')
        .margin(15)
        .onClick(() => {
          // 将光标移动至第一个字符后
          this.controller.caretPosition(1)
        })
      // 密码输入框
      TextInput({ placeholder: 'input your password...' })
        .width(400)
        .height(40)
        .margin(20)
        .type(InputType.Password)
        .maxLength(9)
        .showPasswordIcon(true)
      // 内联风格输入框
      TextInput({ placeholder: 'inline style' })
        .width(400)
        .height(50)
        .margin(20)
        .borderRadius(0)
        .style(TextInputStyle.Inline)
    }.width('100%')
  }
}