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

l梁迪迪l
发布于 2023-7-17 11:59
浏览
0收藏

项目介绍

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

项目基于: ArkTS语言

工具版本: DevEco Studio 3.1.1 Release

SDK版本: 3.2.12.5(API Version 9 Release)

效果演示

ArkTS 自定义浮动提示输入框-鸿蒙开发者社区

实现原理

封装基础组件 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)
  }
}

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2023-7-17 12:00:51修改
2
收藏
回复
举报
1条回复
按时间正序
/
按时间倒序
红叶亦知秋
红叶亦知秋

感觉效果非常不错

回复
2023-7-17 14:16:04
回复
    相关推荐