ArkUI---使用文本---文本输入 (TextInput/TextArea)

ArkUI—使用文本—文本输入 (TextInput/TextArea)

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

TextInput为单行输入框

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

TextArea为多行输入框。通过以下接口来创建。

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

---

多行输入框文字超出一行时会自动折行。

---

设置输入框类型

TextInput有9种可选类型，分别为
Normal基本输入模式
Password密码输入模式
Email邮箱地址输入模式
Number纯数字输入模式
PhoneNumber电话号码输入模式
USER_NAME用户名输入模式
NEW_PASSWORD新密码输入模式
NUMBER_PASSWORD纯数字密码输入模式
NUMBER_DECIMAL带小数点的数字输入模式

通过type属性进行设置：

    基本输入模式（默认类型）

        TextInput()
          .type(InputType.Normal)

    密码输入模式

        TextInput()
          .type(InputType.Password)

添加事件

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

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

完整代码：

@Entry
@Component
struct Index01 {
  @State num:number = 0

  build() {
    Column() {
      //单行输入框
      TextInput({placeholder:'请输入用户名：'}).type(InputType.Normal).margin(5)
      TextInput({placeholder:'请输入用户密码：'}).type(InputType.Password).margin(5)

      TextInput({placeholder:'请输入用户名：',text:'admin'}).type(InputType.Normal).margin(5)
      TextInput({placeholder:'请输入用户密码：',text:'123456'}).type(InputType.Password).margin(5)

      //多行输入框（评论、评价、论坛）
      TextArea({placeholder:'请输入您的评论：'})
        .height(160).padding(5)
        .maxLines(5)
        .showCounter(true)
    }.width('100%').height('100%')
  }
}