ArkTS TextInput和TextArea输入框组件的用法（附带实例）

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

创建输入框

TextInput 为单行输入框，TextArea 为多行输入框，可以通过以下接口来创建：

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

1) 单行输入框的创建示例代码如下：

@Entry
@Component
struct TextInputSample {
  build() {
    Row() {
      TextInput()
    }.width('100%').justifyContent(FlexAlign.SpaceEvenly)
    .padding({ left: 20, right: 20 })
  }
}

显示效果如下图所示：


2) 多行输入框的创建示例代码如下：

@Entry
@Component
struct TextAreaSample {
  build() {
    Row() {
      TextArea()
    }.width('100%').padding({ left: 20, right: 20 })
  }
}

显示效果如下图所示：


多行输入框文字超出一行时会自动折行，示例代码如下：

@Entry
@Component
struct TextAreaSample {
  build() {
    Row() {
      TextArea({text:"我是TextArea我是TextArea我是TextArea我是TextArea"}).width(300)
    }.width('100%').padding({ left: 20, right: 20 })
  }
}

显示效果如下图所示：

设置输入框类型

TextInput 有 9 种可选类型，分别为：

• Normal：基本输入模式；
• Password：密码输入模式
• Email：邮箱地址输入模式；
• Number：纯数字输入模式；
• PhoneNumber：电话号码输入模式；
• USER_NAME：用户名输入模式；
• NEW_PASSWORD：新密码输入模式；
• NUMBER_PASSWORD：纯数字密码输入模式；
• NUMBER_DECIMAL：带小数点的数字输入模式。

默认类型为 Normal。可以通过 type 属性进行设置。下面给出基本输入模式和密码输入模式的示例代码。

1) 基本输入模式的示例代码如下：

@Entry
@Component
struct TextInputSample {
  build() {
    Row() {
      TextInput().type(InputType.Normal)
    }.width('100%').padding({ left: 20, right: 20 })
  }
}

显示效果如下图所示：


2) 密码输入模式的示例代码如下：

@Entry
@Component
struct TextInputSample {
  build() {
   Row() {
     TextInput().type(InputType.Password)
   }.width('100%').padding({ left: 20, right: 20 })
  }
}

显示效果如下图所示：

自定义文本输入组件样式

对于文本输入组件，可以自定义样式。

1) 设置无输入时的提示文本，示例代码如下：

@Entry
@Component
struct TextInputSample {
  build() {
    Row() {
      TextInput({ placeholder:'请输入用户名' })
    }.width('100%').padding({ left: 20, right: 20 })
  }
}

显示效果如下图所示：


2) 设置输入框当前的文本内容，示例代码如下：

@Entry
@Component
struct TextInputSample {
  build() {
    Row() {
      TextInput({
        placeholder: '请输入用户名',
        text: '这是默认的用户名'
      })
    }.width('100%').padding({ left: 20, right: 20 })
  }
}

显示效果如下图所示：


3) 添加 backgroundColor 改变输入框的背景颜色，示例代码如下：

@Entry
@Component
struct TextInputSample {
  build() {
    Row() {
      TextInput({
        placeholder: '我是提示文本',
        text: '我是当前文本内容'
      }).backgroundColor(Color.Pink)
    }.width('100%').padding({ left: 20, right: 20 })
  }
}

显示效果如下图所示：

文本输入框添加事件

文本输入框主要用于获取用户输入的信息，然后把信息处理成数据并上传。绑定 onChange 事件可以获取输入框内改变的内容。用户还可以使用通用事件进行相应的交互操作。

TextInput().onChange((value: string) => {
  console.info(value);
}).onFocus(() => {
  console.info('获取焦点');
})

场景示例

文本输入组件的经典应用场景之一是登录/注册页面，用于让用户进行登录或注册。示例代码如下：

@Entry
@Component
struct TextInputSample {
  build() {
    Column() {
      TextInput({ placeholder: '请输入用户名' }).margin({ top: 20 })
        .onSubmit((EnterKeyType) => {
          console.info(EnterKeyType + '输入法回车键的类型值')
        })
      TextInput({ placeholder: '请输入密码' }).type(InputType.Password).margin({ top: 20 })
        .onSubmit((EnterKeyType) => {
          console.info(EnterKeyType + '输入法回车键的类型值')
        })
      Button('Sign in').width(150).margin({ top: 20 })
    }.padding(20)
  }
}

显示效果如下图所示：