悬浮态效果

2024-01-22 16:20 更新

设置组件的鼠标悬浮态显示效果。

说明

从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

属性

名称参数类型描述
hoverEffectHoverEffect

设置当前组件悬停态下的悬浮效果。

默认值:HoverEffect.Auto

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct HoverExample {
  5. @State isHoverVal: boolean = false
  6. build() {
  7. Column({ space: 5 }) {
  8. Column({ space: 5 }) {
  9. Text('Scale').fontSize(20).fontColor(Color.Gray).width('90%').position({ x: 0, y: 80 })
  10. Column()
  11. .width('80%').height(200).backgroundColor(Color.Gray)
  12. .position({ x: 40, y: 120 })
  13. .hoverEffect(HoverEffect.Scale)
  14. .onHover((isHover: boolean) => {
  15. console.info('Scale isHover: ' + isHover)
  16. this.isHoverVal = isHover
  17. })
  18. Text('Board').fontSize(20).fontColor(Color.Gray).width('90%').position({ x: 0, y: 380 })
  19. Column()
  20. .width('80%').height(200).backgroundColor(Color.Gray)
  21. .hoverEffect(HoverEffect.Highlight)
  22. .position({ x: 40, y: 420 })
  23. .onHover((isHover: boolean) => {
  24. console.info('Highlight isHover: ' +isHover )
  25. this.isHoverVal = isHover
  26. })
  27. }
  28. .hoverEffect(HoverEffect.None)
  29. .width('100%').height('100%').border({ width: 1 })
  30. .onHover((isHover: boolean) => {
  31. console.info('HoverEffect.None')
  32. this.isHoverVal = isHover
  33. })
  34. }
  35. }
  36. }
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号