HarmonyOS鸿蒙Next中把TextInput的组件设置为password时，右边的眼睛图标能否去掉或自定义？

HarmonyOS鸿蒙Next中把TextInput的组件设置为password时，右边的眼睛图标能否去掉或自定义？ 如题，公司的设计稿有自己的图标，我没看到哪里能关闭这个眼睛图标或自定义

图片


更多关于HarmonyOS鸿蒙Next中把TextInput的组件设置为password时，右边的眼睛图标能否去掉或自定义？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

也可以使用passwordIcon自定义图标。

@State passWordOn: Resource = $r('app.media.EyeOn');
@State passWordOff: Resource = $r('app.media.EyeOff');

TextInput({ placeholder: '请输入密码' })
      .type(InputType.Password)
      .showPasswordIcon(false)
      .passwordIcon({ onIconSrc: this.passWordOn, offIconSrc: this.passWordOff })

更多关于HarmonyOS鸿蒙Next中把TextInput的组件设置为password时，右边的眼睛图标能否去掉或自定义？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


可以。利用 showPasswordIcon属性，设置输入框末尾的图标是否显示，showPasswordIcon默认true。

TextInput({ placeholder: '请输入密码' })
  .type(InputType.Password)
  .showPasswordIcon(false)

右边的眼睛图标当然可以去掉或自定义啦

设置.showPasswordIcon(false)隐藏：

TextInput()
  .type(InputType.Password)
  .showPasswordIcon(false)

楼主也可以自定义----

使用Stack容器覆盖自定义图标：

Stack() {
  TextInput({ controller: this.controller })
    .type(InputType.Password)
    .showPasswordIcon(false) // 隐藏默认图标
    .padding({ right: 50 }) // 预留右侧空间
  Image($r('app.media.custom_eye')) // 自定义图标
    .margin({ left: '80%' })         // 调整位置
    .width(24)
    .height(24)
    .onClick(() => {
      // 切换密码显隐逻辑
      this.controller.changeType(InputType.Normal);
    })
}

通过点击事件切换密码输入模式：

@State isVisible: boolean = false;

Image($r(this.isVisible ? 'visible_icon' : 'invisible_icon'))
  .onClick(() => {
    this.isVisible = !this.isVisible;
    this.controller.changeType(
      this.isVisible ? InputType.Normal : InputType.Password
    );
  })

搞定啦！

在TextInput组件中，设置showPasswordIcon属性为false即可隐藏右侧眼睛图标。如需自定义图标，可通过自定义组件或样式覆盖实现，具体方法涉及修改图标资源或使用自定义布局。

在HarmonyOS Next中，TextInput组件设置为密码类型时，默认的右侧眼睛图标（密码可见性切换按钮）是系统提供的标准安全特性。目前，该图标不支持直接通过属性关闭或替换为自定义图标。

若需完全遵循自定义设计稿，实现方案是不使用type属性设置为密码类型，而是通过状态管理手动控制：

  1. 将TextInput的type设置为常规类型（如Text）。
  2. 添加自定义的右侧图标（通过overlay或布局组合实现）。
  3. 通过状态变量管理密码的明文/密文显示（例如使用@State修饰的变量存储输入内容，并根据图标点击事件切换明文/密文显示逻辑）。

这种方案虽增加开发量，但能完全控制图标样式与交互逻辑。

回到顶部