OpenHarmony开发者论坛

标题: TextInput组件密码模式下，右边的眼睛图标能否支持自定义 [打印本页]

作者: 一只杨 时间: 2023-9-12 10:59
标题: TextInput组件密码模式下，右边的眼睛图标能否支持自定义

【问题描述】

TextInput组件设置type为InputType.Password时，右侧出现眼睛图标，不能修改图标样式。

(, 下载次数: 17)

【运行环境】

硬件：rk3568； OpenHarmony 3.2 Beta5 API 9

作者: 无形之刃 时间: 2023-9-14 19:57
提示: 作者被禁止或删除内容自动屏蔽

作者: 梦里啥都有 时间: 2023-9-15 09:18
[md]这种方式确实可以

[/md]

作者: 随缘 时间: 2023-11-15 16:07
标题: TextInput组件密码模式下，右边的眼睛图标能否支持自定义
回复 无形之刃: [md]```
Row() {
      Image( $r( 'app.media.mima' ) )
         .objectFit( ImageFit.Contain )
         .height( 20 )
         .width( 20 )
      Divider()
         .vertical( true )
         .color( ConfigParameter.LINE_COLOUR )
         .height( 24 )
         .width( 0.5 )
         .margin( {
            left : 10 ,
            right : 10
         } )

      TextInput( {
         placeholder : '密码' ,
         controller : this.miMaTextInputController ,
         text : this.miMaString
      } )
         .type( this.isShowPassword ? InputType.Normal : InputType.Password )
         .placeholderColor( ConfigParameter.NO_INPUT_COLOUR )
         .caretColor( ConfigParameter.MAIN_COLOUR )
         .placeholderFont( {
            size : 16 ,
         } )
         .padding( {
            left : 0 ,
            right : 0 ,
            top : 14 ,
            bottom : 14
         } )
         .style( TextInputStyle.Inline )
         .borderRadius( 0 )
         .fontColor( Color.White )
         .fontSize( 16 )
         .flexGrow( 1 )
         .width( 1 )
         .showPasswordIcon( false )
         .margin( {
            right : 10 ,
         } )
         .onChange( ( v ) => {
            this.miMaString = v
         } )

      Image( this.isShowPassword ? $r( 'app.media.xianshimima' ) : $r( 'app.media.buxianmima' ) )
         .width( 30 )
         .height( 30 )
         .objectFit( ImageFit.None )
         .onClick( () => {
            this.isShowPassword = !this.isShowPassword
            console.log( this.miMaString )
         } )

      }
      .borderColor( ConfigParameter.MAIN_COLOUR )
      .borderWidth( 1 )
      .borderRadius( 4 )
      .width( ConfigParameter.FULL )
      .margin( {
      top : 10
      } )
      .padding( {
      left : 10 ,
      right : 10 ,
      } )
```

用此方式实现之后，动态切换显示密码和隐藏密码会有问题，就是输入的内容会清空，目前也没有什么办法解决。不知道你是用什么方式解决的呢？

[/md]

作者: clover 时间: 2023-11-20 17:44
[md]api10支持

```
/**
* PasswordIcon object.
*
* @interface PasswordIcon
* @syscap SystemCapability.ArkUI.ArkUI.Full
* @since 10
*/
interface PasswordIcon {
  /**
* Define the on icon source of PasswordIcon.
*
* @type { ?(string | Resource) }
* @syscap SystemCapability.ArkUI.ArkUI.Full
* @since 10
*/
  onIconSrc?: string | Resource;

  /**
* Define the off icon source of PasswordIcon.
*
* @type { ?(string | Resource) }
* @syscap SystemCapability.ArkUI.ArkUI.Full
* @since 10
*/
  offIconSrc?: string | Resource;
}
```

[/md]

欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/)