HarmonyOS鸿蒙Next中InputType设置为Password后怎么设置Password输入框的样式？

HarmonyOS鸿蒙Next中InputType设置为Password后怎么设置Password输入框的样式？

@Extend(TextInput)
function newExtend() {
  .layoutWeight(1)
  .placeholderColor('#99182431')
  .backgroundColor('#F1F3F5')
  .width('100%')
  .fontSize(14)
  .copyOption(CopyOptions.InApp)
}

Row() {
  Text('密码:')
    .fontSize(18)
    .textAlign(TextAlign.Center)
  TextInput({ placeholder: "请输入密码", text: this.password , controller: this.controller})
    .passwordIcon({ onIconSrc: this.on_password, offIconSrc: this.off_password })
    .showUnderline(true)
    .type(InputType.Password)
    .showError(this.passwordError)
    .newExtend()
    .onChange((value: string) => {
      this.onChangePassword(value)
    })
    .onDidInsert(() => {
      // 输入框内容发生改变时，检查输入的密码
      this.onEditChangePassword()

    })
}

只要输入密码就会出现奇怪的样式 怎么调试


更多关于HarmonyOS鸿蒙Next中InputType设置为Password后怎么设置Password输入框的样式？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS Next中，可通过TextInput组件的type属性设置为InputType.PASSWORD实现密码输入框。要修改样式，使用style属性或attributeModifier进行自定义：

  1. 基础样式修改：
TextInput()
  .type(InputType.PASSWORD)
  .width('100%')
  .height(40)
  .borderRadius(4)
  .borderWidth(1)
  .borderColor('#CCCCCC')
  1. 使用attributeModifier深度定制：
TextInput()
  .attributeModifier(attr => {
    attr.setPasswordRules('required:upper;required:lower')
    attr.setPlaceholderColor('#999999')
  })

可通过fontColor、backgroundColor等属性调整文本颜色和背景色。密码显示/隐藏图标样式需通过showPasswordIcon相关属性配置。

更多关于HarmonyOS鸿蒙Next中InputType设置为Password后怎么设置Password输入框的样式？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，可以通过TextInput组件的属性来定制Password输入框的样式。根据你的代码，出现奇怪样式可能是由于密码图标配置或样式冲突导致的。以下是几个关键点：

  1. 密码可见性图标设置：
.passwordIcon({
  onIconSrc: $r('app.media.visible_icon'), // 显示密码时的图标
  offIconSrc: $r('app.media.invisible_icon') // 隐藏密码时的图标
})
  1. 基础样式调整建议：
TextInput()
  .type(InputType.Password)
  .height(40) // 设置固定高度
  .borderRadius(8) // 圆角
  .padding({left: 10, right: 10}) // 内边距
  .fontColor('#000000') // 文字颜色
  .placeholderFont({size: 14, weight: 400}) // 提示文字样式
  1. 常见问题排查：
  • 检查图标资源是否正确引用
  • 确认是否与其他样式属性冲突
  • 尝试移除.showUnderline(true)看是否改善

可以通过逐步注释样式属性来定位问题源。

回到顶部