HarmonyOS Next开发学习手册——添加组件（文本输入 (TextInput/TextArea)）

最新推荐文章于 2024-10-08 09:05:48 发布

OpenHarmony_小贾

最新推荐文章于 2024-10-08 09:05:48 发布

阅读量881

点赞数 16

分类专栏：鸿蒙开发 HarmonyOS 移动开发文章标签： harmonyos 深度学习鸿蒙应用开发 list 移动开发自定义控件组件化

本文链接：https://blog.csdn.net/maniuT/article/details/140359274

版权

移动开发同时被 3 个专栏收录

955 篇文章 15 订阅

订阅专栏

HarmonyOS

871 篇文章 15 订阅

订阅专栏

鸿蒙开发

504 篇文章 2 订阅

订阅专栏

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

创建输入框

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

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

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

单行输入框

TextInput()

多行输入框

TextArea()

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

TextArea({text:"我是TextArea我是TextArea我是TextArea我是TextArea"}).width(300)

设置输入框类型

TextInput有9种可选类型，分别为Normal基本输入模式、Password密码输入模式、Email邮箱地址输入模式、Number纯数字输入模式、PhoneNumber电话号码输入模式、USER_NAME用户名输入模式、NEW_PASSWORD新密码输入模式、NUMBER_PASSWORD纯数字密码输入模式、NUMBER_DECIMAL带小数点的数字输入模式。通过type属性进行设置：

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

TextInput()
  .type(InputType.Normal)

密码输入模式

TextInput()
  .type(InputType.Password)

自定义样式

设置无输入时的提示文本。

TextInput({placeholder:'我是提示文本'})

设置输入框当前的文本内容。

TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'})

添加backgroundColor改变输入框的背景颜色。

TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'})
  .backgroundColor(Color.Pink)

更丰富的样式可以结合通用属性实现。

添加事件

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

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

场景示例

在登录/注册页面，用户进行登录或注册。

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

键盘避让

键盘抬起后，具有滚动能力的容器组件在横竖屏切换时，才会生效键盘避让，若希望无滚动能力的容器组件也生效键盘避让，建议在组件外嵌套一层具有滚动能力的容器组件，比如 Scroll 、 List 、 Grid 。

// xxx.ets
@Entry
@Component
struct Index {
  placeHolderArr: string[] = ['1', '2', '3', '4', '5', '6', '7']

  build() {
    Scroll() {
      Column() {
        ForEach(this.placeHolderArr, (placeholder: string) => {
          TextInput({ placeholder: 'TextInput ' + placeholder })
            .margin(30)
        })
      }
    }
    .height('100%')
    .width('100%')
  }
}

鸿蒙全栈开发全新学习指南

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以要有一份实用的鸿蒙（HarmonyOS NEXT）学习路线与学习文档用来跟着学习是非常有必要的。

针对一些列因素，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线，包含了鸿蒙开发必掌握的核心知识要点，内容有（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、WebGL、元服务、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、系统定制移植等等）鸿蒙（HarmonyOS NEXT）技术知识点。