悬浮态效果
2024-01-22 16:20 更新
设置组件的鼠标悬浮态显示效果。
说明
从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
示例
- // xxx.ets
- @Entry
- @Component
- struct HoverExample {
- @State isHoverVal: boolean = false
- build() {
- Column({ space: 5 }) {
- Column({ space: 5 }) {
- Text('Scale').fontSize(20).fontColor(Color.Gray).width('90%').position({ x: 0, y: 80 })
- Column()
- .width('80%').height(200).backgroundColor(Color.Gray)
- .position({ x: 40, y: 120 })
- .hoverEffect(HoverEffect.Scale)
- .onHover((isHover: boolean) => {
- console.info('Scale isHover: ' + isHover)
- this.isHoverVal = isHover
- })
- Text('Board').fontSize(20).fontColor(Color.Gray).width('90%').position({ x: 0, y: 380 })
- Column()
- .width('80%').height(200).backgroundColor(Color.Gray)
- .hoverEffect(HoverEffect.Highlight)
- .position({ x: 40, y: 420 })
- .onHover((isHover: boolean) => {
- console.info('Highlight isHover: ' +isHover )
- this.isHoverVal = isHover
- })
- }
- .hoverEffect(HoverEffect.None)
- .width('100%').height('100%').border({ width: 1 })
- .onHover((isHover: boolean) => {
- console.info('HoverEffect.None')
- this.isHoverVal = isHover
- })
- }
- }
- }
以上内容是否对您有帮助:
← 焦点控制
更多建议: