OpenHarmony实战开发-如何自定义鼠标悬停/点击组件的背景色

场景介绍

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

效果呈现

本例效果图如下：

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

运行环境

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

• IDE: DevEco Studio 4.0 Release
• SDK: Ohos_sdk_public 4.0.10.13(APIVersion 10 Release)

实现思路

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

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

开发步骤

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

1.构建UI。 通过TextInput、Button、Text组件将UI框架搭建起来。

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')
}

2.鼠标悬浮于组件上背景颜色发生变化。 通过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'
  }
})

3.输入错误手机号时输入框的状态以及输入正确手机号时按钮的变化。 通过判断输入的手机号是否与预设手机号相同。如果相同，通过函数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')
  }
}

我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI、实战开发视频教程》以及《鸿蒙生态应用开发白皮书V2.0PDF》《鸿蒙开发学习手册》（共计890页）鸿蒙开发资料等…希望对大家有所帮助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

OpenHarmony APP开发教程步骤：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙生态应用开发白皮书V2.0PDF：https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG

应用开发中级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

应用开发中高级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

南北双向高工技能基础：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

全网首发-工业级 南向设备开发就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

《鸿蒙开发学习手册》：

如何快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开发：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……