鸿蒙Harmony开发案例教程：自定义鼠标悬停/点击组件的背景色

鼠标悬浮于输入框上方，输入框的背景色不发生变化。

m0_64422261

1233人浏览 · 2024-06-27 15:36:32

m0_64422261 · 2024-06-27 15:36:32 发布

在日常的鼠标操作中，当鼠标悬浮或点击某个元素时，该元素的背景色一般都会加深或者背景色发生变化，因此开发者可以根据自己的喜好进行开发设置。本文即为大家介绍这种操作的开发。

效果呈现

本例效果图如下：

效果说明：鼠标悬浮于输入框上方，输入框的背景色不发生变化。鼠标悬浮于按钮上方，按钮的背景色会发生变化。在输入正确的手机号后点击按钮TextError不显示，否则输入框下方会出现提示语。

运行环境

本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：

IDE: DevEco Studio 4.0 Release
SDK: Ohos_sdk_public 4.0.10.13(API Version 10 Release)

实现思路

本例包含的关键操作及其实现方案如下：

悬浮于TextInput组件和Button组件上方，组件背景色发生变化：通过onHover()事件去判断是否悬浮于组件上方去实现。
按钮出现倒计时：通过自定义函数materOnClick()调用setInterval()直到时间为0s。
输入框的状态：通过判断输入手机号与预留的手机号是否相同去发生不同状态。

点击领取→纯血鸿蒙Next全套最新学习资料希望这一份鸿蒙学习资料能够给大家带来帮助

开发步骤

本例详细开发步骤如下，开发步骤中仅展示相关步骤代码，全量代码请参考完整代码章节的内容。

build(){
  Column(){
    Text('验证码倒计时')
      .fontSize(36).margin(20)
    Row({space:10}){
      TextInput({placeholder:"请输入手机号",text:this.Text})
        .type(InputType.Normal)
        .placeholderColor(Color.Gray)
        .placeholderFont({
            size:20,
            weight:FontWeight.Normal,
            style:FontStyle.Normal
        })
        .enterKeyType(EnterKeyType.Next)
        .caretColor(Color.Blue)
        .maxLength(11)
        // 设置错误状态下提示的错误文本或者不显示错误状态
        .showError(this.TextError)
        .enableKeyboardOnFocus(false)
        .width(200)
        .height(50)
        .backgroundColor(this.color1)
        .onChange((value:string)=>{
        this.Text = value;
      })
    
      Button(this.flag ? `${this.sec}`+ "s" :"验证码",{type: ButtonType.Normal})
        .width(150)
        .height(50)
        .backgroundColor(this.color)
        .fontSize(18)
        .fontColor(Color.White)
        .borderRadius(15)
    }.height(60)
  }.width('100%')
  .height('100%')
  .justifyContent(FlexAlign.Center)
  .alignItems(HorizontalAlign.Center)
  .backgroundColor('#A1E1D6')
}

鼠标悬浮于组件上背景颜色发生变化。通过onHover()事件去判断isHover的boolean去设置组件的背景色。

// 输入框的背景色变化
.onHover((isHover?:boolean,event?:HoverEvent):void=>{
  if (isHover){
    this.color1 = '#DECECE'
  }else {
    this.color1 = '#DECECE'
  }
})
// 按钮的背景色变化
.onHover((isHover?:boolean,event?:HoverEvent):void=>{
  if(isHover){
    this.color = '#46CDD0'
  }else {
    this.color ='#3E84A6'
  }
})

输入错误手机号时输入框的状态以及输入正确手机号时按钮的变化。通过判断输入的手机号是否与预设手机号相同。如果相同，通过函数materOnClick()，按钮出现60s倒计时；如果不同，输入框下方出现错误状态提示文本并且点击按钮不发生变化。

// 自定义倒计时函数
private materOnClick(){
  let T = setInterval(()=>{
    if (this.sec <= 0){
      clearTimeout(T)
    }else{
      this.sec--
    }
  },1000)
}
...
// 输入正确和错误手机号的TextInput的状态
.onClick(()=>{
  if (this.Text == this.PhoneNumber){
    this.flag = true;
    this.TextError = undefined;
    this.materOnClick()
  }else {
    this.TextError = '请输入正确的手机号';
    this.Text = '';
  }
})

完整示例代码

完整示例代码如下：

@Entry
@Component
struct Index{
  @State Text: string = ''
  @State sec: number = 60
  @State flag: boolean = false
  @State color: string = '#46CDD0'
  @State color1:string = '#DECECE'
  @State TextError :string | undefined = undefined
  @State PhoneNumber: string = '13888888888'
    private materOnClick(){
    let T = setInterval(()=>{
      if (this.sec <= 0){
        clearTimeout(T)
      }else{
        this.sec--
      }
    },1000)
  }

  build(){
    Column(){
      Text('验证码倒计时')
        .fontSize(36).margin(20)
      Row({space:10}){
        TextInput({placeholder:"请输入手机号",text:this.Text})
          .type(InputType.Normal)
          .placeholderColor(Color.Gray)
          .placeholderFont({
            size:20,
            weight:FontWeight.Normal,
            style:FontStyle.Normal
          })
          .enterKeyType(EnterKeyType.Next)
          .caretColor(Color.Blue)
          .maxLength(11)
          .showError(this.TextError)
          .enableKeyboardOnFocus(false)
          .onChange((value:string)=>{
            this.Text = value;
          })
          .width(200)
          .height(50)
          .backgroundColor(this.color1)
          .onHover((isHover?:boolean,event?:HoverEvent):void=>{
            if (isHover){
              this.color1 = '#DECECE'
            }else {
              this.color1 = '#DECECE'
            }
          })
        Button(this.flag ? `${this.sec}`+ "s" :"验证码",{type: ButtonType.Normal})
          .width(150)
          .height(50)
          .backgroundColor(this.color)
          .fontSize(18)
          .fontColor(Color.White)
          .borderRadius(15)
          .onHover((isHover?:boolean,event?:HoverEvent):void=>{
            if(isHover){
              this.color = '#46CDD0'
            }else {
              this.color ='#3E84A6'
            }
          })
          .onClick(()=>{
            if (this.Text == this.PhoneNumber){
              this.flag = true;
              this.TextError = undefined;
              this.materOnClick()
            }else {
              this.TextError = '请输入正确的手机号';
              this.Text = '';
            }
          })
      }.height(60)
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .backgroundColor('#A1E1D6')
  }
}

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？但是又不知道从哪里下手，而且学习时频繁踩坑，最终浪费大量时间。所以本人整理了一些比较合适的鸿蒙（HarmonyOS NEXT）学习路径和一些资料的整理供小伙伴学习

点击领取→纯血鸿蒙Next全套最新学习资料（安全链接，放心点击）

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

一、鸿蒙（HarmonyOS NEXT）最新学习路线

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）…等技术知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

二、HarmonyOS Next 最新全套视频教程