从零开始：构建高效的 TextInput 用户界面

梁林烁
469 阅读4分钟

环境及工具

HarmonyOS 5.0.0 Release
DevEcoStudio
适用于HarmonyOS Next原生开发

TextInput&TextArea

每天一个知识点，点点不一样。今天我们一起来学习输入框，多的不说少的不唠，立马开始。

TextInput（文本输入框）和 TextArea（多行文本区域）

TextInput 和 TextArea 是用户界面设计中用于接收用户输入文本的两种基本组件。它们广泛应用于各种表单、搜索栏、评论区等场景，是用户与应用程序交互的重要桥梁。

TextInput（文本输入框）

功能描述：

  • 单一性：  TextInput 通常用于输入简短的信息，如姓名、电话号码、电子邮件地址或密码。
  • 限制长度：  可以设置最大字符数来限制用户输入的内容长度。
  • 样式和行为：  支持多种形式的样式定制，比如边框颜色、背景色、占位符文本等；还可以根据需要启用或禁用输入框。
  • 验证规则：  能够应用正则表达式或其他验证逻辑，确保输入符合特定格式，例如确保电子邮件地址正确无误。
  • 辅助功能：  支持自动完成、自动校正、拼写检查等功能，提升用户体验。

使用场景：

  • 当需要从用户那里收集简短且明确的信息时，如登录信息、个人资料字段等。
TextArea（多行文本区域）

功能描述：

  • 多行支持：  TextArea 允许用户输入多行文本，适合用来撰写较长内容，如留言、评论、描述等。
  • 可调整大小：  用户可以根据需要调整 TextArea 的高度，一些实现还允许宽度调整。
  • 字符计数：  提供实时字符计数功能，帮助用户了解剩余可用空间。
  • 富文本编辑：  某些高级实现可能包含富文本编辑特性，如粗体、斜体、列表等格式化选项。
  • 文件拖放：  在某些应用场景下，可以集成拖放文件上传功能，让用户直接将文件拖入 TextArea 中。

使用场景：

  • 适用于需要用户输入较大篇幅文本的地方，如论坛发帖、产品评价、文档编写等。
交互特性
  • 焦点管理：  当用户点击 TextInput 或 TextArea 时，它会获得焦点，显示光标，并准备接收键盘输入。失去焦点时，可能会触发验证逻辑。
  • 占位符文本：  为了指导用户输入，可以在没有文本时显示提示信息（placeholder），当用户开始输入后消失。
  • 错误反馈：  如果用户的输入不符合要求，应该给出清晰的错误提示，说明问题所在，并引导如何修正。
  • 键盘导航：  支持通过 Tab 键在不同输入框之间切换，以及使用方向键、Home/End 等快捷键进行光标定位。

1、TextInput

1.1概念

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

1.2创建输入框

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

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


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

单行输入框

TextInput()

image.png

TextArea()

image.png

1.3 常用参数和属性

TextInput()

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

1.3.1 常用参数

****参数名类型是否必填说明
placeholderResourceStr否设置无输入时的提示文本。
textResourceStr否设置输入框当前的文本内容。从API version 10开始，该参数支持 $$ 双向绑定变量。

1.3.2 常用属性

名称参数类型描述
typeInputType设置输入框类型。默认值：InputType.Normal
showUnderlineboolean设置是否开启下划线。下划线默认颜色为'#33182431'，默认粗细为1px，文本框尺寸48vp（下划线只支持InputType.Normal类型）。默认值：false
passwordIconPasswordIcononIconSrc:输入状态时图标offIconSrc:隐藏状态时图标
placeholderColorResourceColor设置placeholder文本颜色。默认值跟随主题。

1.3.3 inputType部分枚举值

名称描述
Normal基本输入模式。 可输入数字、字母、下划线、空格、特殊字符。
Password密码输入模式。支持输入数字、字母、下划线、空格、特殊字符。密码显示小眼睛图标并且默认会将文字变成圆点。密码输入模式不支持下划线样式。在已启用密码保险箱的情况下，支持用户名、密码的自动保存和自动填充。
Email邮箱地址输入模式。支持数字，字母，下划线，.字符，以及@字符（只能存在一个@字符）。
Number纯数字输入模式。

1.4 学以致用

image.png

@Entry
@Component
struct Page01_TextInput {
  @State username:string =''
  @State password:string =''
  build() {
    Column(){
      TextInput({placeholder:'输入用户名',text:$$this.username})
        .type(InputType.Normal)
        .backgroundColor(Color.Transparent)
        .borderRadius(0)
        .height(60)
        .border({
          width:{bottom:1}
        ,color:'#ccc'
        })


      TextInput({placeholder:'请输入密码',text:$$this.password})
        .type(InputType.Password)
        .height(60)
        .backgroundColor(Color.Transparent)
        .borderRadius(0)
        .border({
          width:{bottom:1}
        ,color:'#ccc'
        })
        .passwordIcon({
          onIconSrc:$r('app.media.ic_eyes_open'),
          offIconSrc:$r('app.media.ic_eyes_close')
        })
      Row({space:20}){
        Button('清空输入内容')
          .onClick(()=>{
            this.username=''
            this.password=''
          })
        Button('获取输入内容')
          .onClick(()=>{
            AlertDialog.show({
              message:`用户名:${this.username},密码:${this.password}`
            })
          })
      }
      .margin({top:10})
    }
    .padding(20)
  }
}

2、TextArea

2.1用法

TextArea 可以用来设置多行文本，用法和TextInput基本一致

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

2.2常用参数和属性

2.2.1常用参数

参数名类型是否必填说明
placeholderResourceStr否设置无输入时的提示文本。
textResourceStr否设置输入框当前的文本内容。从API version 10开始，该参数支持 $$ 双向绑定变量。

2.2.2常用属性

名称参数类型描述
typeInputType设置输入框类型。默认值：InputType.Normal
placeholderColorResourceColor设置placeholder文本颜色。默认值跟随主题。
showCountervalue: boolean, options11+?: InputCounterOptions参数value为true时，才能设置options，文本框开启计数下标功能，需要配合maxlength（设置最大字符限制）一起使用。
maxLengthnumber设置文本的最大输入字符数。 默认不设置最大输入字符数限制。 到达文本最大字符限制，将无法继续输入字符，同时边框变为红色。
....

2.3学以致用

image.png

@Entry
@Component
struct Page02_TextArea {
  @State info:string = ''
  build() {
    Column(){
      TextArea({placeholder:'请输入内容',text:$$this.info})
        .maxLines(1)
        .maxLength(100)
        .showCounter(true)
        .height(150)
      Row({space:20}){
        Button('清空输入内容')
          .onClick(()=>{
            this.info=''
          })
        Button('获取输入内容')
          .onClick(()=>{
            AlertDialog.show({
              message:this.info
            })
          })
      }
      .margin({top:10})
    }
    .padding(20)
  }
}

注意事项

  1. 验证输入：

    • 在提交表单之前，应该对用户输入的数据进行验证，确保符合预期格式和要求。
    • 对于 TextInput 的密码字段，考虑使用安全输入模式（如隐藏字符）。

  2. 用户体验：

    • 提供清晰的提示信息帮助用户理解应输入什么内容。
    • 对于长文本输入（如 TextArea），考虑实现自动保存功能，以防数据丢失。

  3. 性能优化：

    • 如果 TextArea 需要处理大量文本输入，注意优化渲染性能，避免界面卡顿。
    • 对于频繁更新的内容，考虑使用防抖（debounce）或节流（throttle）技术来减少不必要的计算。

  4. 可访问性：

    • 确保所有输入控件对于屏幕阅读器和其他辅助技术友好。
    • 使用语义化的标签（如 aria-label 或 aria-labelledby）为用户提供额外的信息
avatar
文章
阅读
粉丝