TextInput组件如何在输入框的右边设置自定义样式（如图片），代码加详细解释 原创

前言

在现代移动应用开发中，用户体验设计至关重要。TextInput组件作为用户输入信息的重要工具，其外观和功能的设计直接影响到用户与应用的交互体验。本文将探讨如何在ArkUI框架下，为TextInput组件的输入框右侧设置自定义样式，例如添加一个图片图标。通过这种方式，开发者可以增强输入框的直观性和功能性，提升整体应用的美观性和用户体验。而笔者在开发过程中也曾遇到这个疑问，下面通过示例来给大家详细解释。

Textinput组件介绍

TextInput组件是ArkUI中用于接收用户输入的基础组件之一。它广泛应用于各种需要用户输入文本的场景，如登录、注册、搜索、评论等。通过合理的设计和配置，TextInput组件可以提供良好的用户体验，提升应用的交互性。

主要属性

• type
  type(value: InputType)
  设置输入框类型。
• placeholderColor
  placeholderColor(value: ResourceColor)
  设置placeholder文本颜色。
• placeholderFont
  placeholderFont(value?: Font)
  设置placeholder文本样式，包括字体大小，字体粗细，字体族，字体风格。当前支持’HarmonyOS Sans’字体和注册自定义字体。
• caretColor
  caretColor(value: ResourceColor)
• 设置输入框光标颜色。
  passwordIcon10+
  passwordIcon(value: PasswordIcon)
  设置当密码输入模式时，输入框末尾的图标。
  支持jpg、png、bmp、heic和webp类型的图片格式。
  该图标的固定尺寸为24vp，若引用的图标过大或过小，均显示为固定尺寸。
• cancelButton11+
  cancelButton(value: { style?: CancelButtonStyle, icon?: IconOptions })
  设置右侧清除按钮样式。不支持内联模式。

后面的两个属性就是今天用到的属性

普通输入框右侧图标自定义

在ArkUI框架中，TextInput组件不仅可以用于普通文本输入，还可以通过自定义取消按钮图标来提升用户体验。取消按钮通常用于清除输入框中的内容，而自定义图标可以让界面更加美观和直观。下面我们将详细介绍如何实现这一点

普通输入框的基本用法

首先，我们来看一个基本的TextInput组件的用法，用于接收用户的普通文本输入：

TextInput({ placeholder: '请输入用户名' })
  .type(InputType.Normal)
  .fontColor(Color.Black)
  .caretStyle({ width: 1.5, color: '#000000' })
  .textAlign(TextAlign.Center)
  .shadow({ color: 'rgba(0, 0, 0, .25)', offsetX: 0, offsetY: 1, radius: 4 })
  .fontSize(18)
  .width('71%')
  .height(42)
  .backgroundColor(Color.White)
  .borderRadius(5)
  .margin({ top: 28, left: 8 })

自定义取消按钮图标

为了在输入框的右侧添加自定义的取消按钮图标，我们可以使用cancelButton属性。这个属性允许我们定义取消按钮的样式和图标。下面是一个详细的示例代码：

TextInput({
  placeholder: '请输入用户名'
})
  .type(InputType.Normal)
  .fontColor(Color.Black)
  .caretStyle({ width: 1.5, color: '#000000' })
  .textAlign(TextAlign.Center)
  .shadow({ color: 'rgba(0, 0, 0, .25)', offsetX: 0, offsetY: 1, radius: 4 })
  .fontSize(18)
  .width('71%')
  .height(42)
  .backgroundColor(Color.White)
  .borderRadius(5)
  .margin({ top: 28, left: 8 })
  .cancelButton({
    style: CancelButtonStyle.CONSTANT, // 设置取消按钮的样式为常驻样式
    icon: {
      src: $r("app.media.ic_pen"), // 设置取消按钮图标的图片资源
      size: 16 // 设置取消按钮图标的大小
    }
  })

通过上述步骤和注意事项，开发者可以轻松地在普通输入框的右侧添加自定义的取消按钮图标，提升应用的视觉效果和用户体验。要注意点击图片会将输入框文字清空然后将光标定位到输入框中。

密码输入框及其显示/隐藏图标自定义

在ArkUI框架中，TextInput组件不仅可以用于普通文本输入，还可以用于密码输入，并通过自定义显示和隐藏密码的图标来提升用户体验。这些图标可以让用户直观地控制密码的可见性，增加安全性的同时也提升了交互性。下面我们将详细介绍如何实现这一点

密码输入框的基本用法

首先，我们来看一个基本的密码输入框的用法，用于接收用户的密码输入：

TextInput({ placeholder: '请输入密码' })
  .type(InputType.Password)
  .width('71%')
  .height(42)
  .margin({ top: 28, left: 8 })
  .textAlign(TextAlign.Center)
  .backgroundColor(Color.White)
  .borderRadius(5)
  .shadow({ color: 'rgba(0, 0, 0, .25)', offsetX: 0, offsetY: 1, radius: 4 })
  .fontSize(18)

自定义密码图标

为了在密码输入框的右侧添加自定义的显示和隐藏密码图标，我们可以使用passwordIcon属性。这个属性允许我们定义密码图标在不同状态下的显示。下面是一个详细的示例代码：

TextInput({ placeholder: '请输入密码' })
  .type(InputType.Password)
  .width('71%')
  .height(42)
  .margin({ top: 28, left: 8 })
  .textAlign(TextAlign.Center)
  .backgroundColor(Color.White)
  .borderRadius(5)
  .shadow({ color: 'rgba(0, 0, 0, .25)', offsetX: 0, offsetY: 1, radius: 4 })
  .fontSize(18)
  .passwordIcon({
    onIconSrc: $r("app.media.ic_visible"), // 设置显示密码时的图标资源
    offIconSrc: $r("app.media.ic_hidden") // 设置隐藏密码时的图标资源
  })

通过上述步骤和注意事项，开发者可以轻松地在密码输入框的右侧添加自定义的显示和隐藏密码图标，提升应用的视觉效果和用户体验。

总结

在ArkUI框架中，TextInput组件是实现用户输入功能的重要工具。通过合理的设计和配置，TextInput组件可以极大地提升用户体验。本文详细介绍了如何在TextInput组件的输入框右侧设置自定义样式，包括普通输入框的取消按钮图标自定义和密码输入框的显示/隐藏密码图标自定义。
通过这些方法和技巧，开发者可以在ArkUI中创建更加美观和用户友好的输入框，提升应用的整体交互体验。希望本文的内容对你有所帮助，并激发你更多关于ArkUI组件设计的灵感。