HarmonyOS鸿蒙Next中underlineColor只能用于Input.Normal吗

HarmonyOS鸿蒙Next中underlineColor只能用于Input.Normal吗 想用TextInput自带的下划线，但是又想限制输入内容为数字，有什么办法吗

6 回复

【解决方案】

TextInput组件的密码输入模式不支持下划线样式，所以不生效，showUnderline只支持InputType.Normal类型。结合outline可以实现下划线效果，示例代码如下：

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        TextInput({ placeholder: 'input your password...' })
          .width('95%')
          .height(40)
          .margin(20)
          .type(InputType.Password)
          .maxLength(9)
          .showPasswordIcon(true)
          .backgroundColor('#00000000')
          .outline({
            width: { bottom: 1 },
            color: Color.Black,
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中underlineColor只能用于Input.Normal吗的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


使用inputFilter属性设置正则表达式过滤非数字字符：

TextInput({ placeholder: '请输入数字' })
  .type(InputType.Normal)
  .underlineColor(Color.Blue) // 设置下划线颜色
  .inputFilter('', (val) => { // 仅允许输入数字
    console.error('非法输入：' + val);
    return 0;
  })

可搭配onChange事件进行实时校验：

@State inputText: string = '';

TextInput({ text: this.inputText })
  .onChange((value) => {
    if (!/^\d*$/.test(value)) {
      this.inputText = value.replace(/[^\d]/g, '');
    }
  })

特殊场景处理

若必须使用其他输入类型（如Password）且需要下划线：

通过自定义Divider组件实现下划线效果

Column() {
  TextInput({ placeholder: '密码输入' })
    .type(InputType.Password)
    .border({ width: 0 }) // 移除默认边框
  Divider().strokeWidth(1).color(Color.Blue)
}

我也遇到过这个问题，最后的解决方案是 自己模拟input，这样就可以自定义很多样式了

可以试试官方的这个例子

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinput#

在HarmonyOS鸿蒙Next中，underlineColor属性不仅限于Input.Normal组件使用。该属性可以应用于多个支持下划线颜色设置的组件，如TextInput、TextArea等输入类组件。underlineColor用于自定义组件下划线的颜色，可以通过XML或TS/JS方式设置。具体支持情况需查阅对应组件的API文档确认。

在HarmonyOS Next中，TextInput组件的underlineColor属性确实主要用于Input.Normal状态下的下划线颜色设置。不过要实现数字输入限制，可以结合inputFilter属性来实现：

  1. 对于下划线颜色设置：
TextInput()
  .underlineColor($r('app.color.underline_normal')) // 正常状态下的下划线颜色
  .underlineColor($r('app.color.underline_focused'), InputStatus.Focused) // 聚焦状态
  1. 限制数字输入的方法：
TextInput()
  .type(InputType.Number) // 直接设置输入类型为数字
  // 或者使用inputFilter进行更精确控制
  .inputFilter('[0-9]', (value: string) => {
    return /^[0-9]*$/.test(value)
  })

这两种方式都可以实现数字输入限制，同时保持TextInput自带的下划线样式。第一种方式(type=Number)会调起数字键盘，第二种方式(inputFilter)则可以进行更复杂的输入验证。

回到顶部