ArkTS 自定义浮动提示输入框 原创

项目介绍

自定义输入框功能：1、输入时更改输入状态的颜色，提示文字悬浮向上；2、有内容时，清除按钮显示，点击清空内容。

项目基于： ArkTS语言

工具版本： DevEco Studio 3.1.1 Release

SDK版本： 3.2.12.5（API Version 9 Release）

效果演示

实现原理

封装基础组件 TextInput 监听其两个事件： onChange（ 输入内容发生变化 ）、 onEditChange（ 输入状态变化时 ）

1、当内容不为空 或 输入状态，更改浮动提示y坐标和颜色、底部线条的缩放。

2、当内容不为空，显示清空按钮。

实现代码**（部分代码）**

需要注意：提示文本需要设置enabled = false 防止占用输入框的点击事件。

  build() {
    Stack() {
      // 输入框
      TextInput({ text: this.textValue })
        .width('100%')
        .height('100%')
        .borderRadius(0)
        .borderColor('#e6e6e6')
        .borderWidth({ bottom: 1 })
        .backgroundColor(Color.Transparent)
        .type(this.typeInput)
        .showPasswordIcon(false)
        .onEditChange((isEditing) => {
          // 输入内容发生变化
          this.isEditing = isEditing
          this.isFloatHint = this.isEditing || this.textValue !== ''
        })
        .onChange((value) => {
          // 输入状态变化时
          this.textValue = value
          this.isFloatHint = this.isEditing || this.textValue !== ''
        })
        
      // 提示文本（占位符）
      Text(this.placeholder)
        .enabled(false)
        .fontColor(this.isFloatHint ? '#ff2aa8fc' : '#ff888888')
        .position({ x: 0, y: this.isFloatHint ? 0 : '50%' })
        .translate({ x: 15, y: '-50%' })
        .animation({ duration: 100, curve: Curve.Linear })
	  
      // 底部线
      Line()
        .width('100%')
        .height(1)
        .backgroundColor('#ff2aa8fc')
        .position({ x: 0, y: 44 })
        .scale({ x: this.isFloatHint ? 1 : 0, centerX: 0 })
        .animation({ duration: 300, curve: Curve.Linear })
		
      // 清除按钮（建议换成图标）
      if (this.textValue) {
        Text('X')
          .width(15)
          .height(15)
          .fontSize(11)
          .fontColor('#ff2aa8fc')
          .textAlign(TextAlign.Center)
          .border({ width: 1, radius: 15, color: '#ff2aa8fc' })
          .position({ x: '90%', y: '50%' })
          .translate({ y: '-50%' })
          .onClick(() => {
            this.textValue = ''
          })
      }
    }.width('100%').height(45)
  }

完整代码**（可直接预览）**

@Component
struct InputFloatHint {
  // 是否浮动提示
  @State isFloatHint: boolean = false
  // 输入的文本内容
  @State textValue: string = ''
  // 是否编辑状态
  isEditing = false
  // 占位符内容
  placeholder: string
  // 输入框类型
  typeInput: InputType = InputType.Normal

  build() {
    Stack() {
      TextInput({ text: this.textValue })
        .width('100%')
        .height('100%')
        .borderRadius(0)
        .borderColor('#e6e6e6')
        .borderWidth({ bottom: 1 })
        .backgroundColor(Color.Transparent)
        .type(this.typeInput)
        .showPasswordIcon(false)
        .onEditChange((isEditing) => {
          this.isEditing = isEditing
          this.isFloatHint = this.isEditing || this.textValue !== ''
        })
        .onChange((value) => {
          this.textValue = value
          this.isFloatHint = this.isEditing || this.textValue !== ''
        })
      Text(this.placeholder)
        .enabled(false)
        .fontColor(this.isFloatHint ? '#ff2aa8fc' : '#ff888888')
        .position({ x: 0, y: this.isFloatHint ? 0 : '50%' })
        .translate({ x: 15, y: '-50%' })
        .animation({ duration: 100, curve: Curve.Linear })

      Line()
        .width('100%')
        .height(1)
        .backgroundColor('#ff2aa8fc')
        .position({ x: 0, y: 44 })
        .scale({ x: this.isFloatHint ? 1 : 0, centerX: 0 })
        .animation({ duration: 300, curve: Curve.Linear })

      if (this.textValue) {
        Text('X')
          .width(15)
          .height(15)
          .fontSize(11)
          .fontColor('#ff2aa8fc')
          .textAlign(TextAlign.Center)
          .border({ width: 1, radius: 15, color: '#ff2aa8fc' })
          .position({ x: '90%', y: '50%' })
          .translate({ y: '-50%' })
          .onClick(() => {
            this.textValue = ''
          })
      }
    }.width('100%').height(45)
  }
}

/**
 * 输入浮动提示
 */
@Entry
@Component
struct InputFloatHintPage {
  build() {
    Column() {
      Column() {
        InputFloatHint({ placeholder: '账号' })
        Blank().height(30)
        InputFloatHint({ placeholder: '密码', typeInput: InputType.Password })
        Blank().height(50)
        Button('登录').width(150)
      }
      .width('90%')
      .padding(30)
      .backgroundColor(Color.White)
      .border({ radius: 10 })
      .shadow({ radius: 10, color: '#80007dfe' })
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

每天进步一点点、需要付出努力亿点点。