QML 鼠标悬停改变光标样式

在QML中,当鼠标悬停在MouseArea上时改变鼠标图标为”可点击”样式(通常是手型光标),可以通过设置MouseAreacursorShape属性和hoverEnabled属性实现。以下是详细步骤和代码示例:

解决方案:

import QtQuick 2.15

Item {
    width: 200
    height: 200

    Rectangle {
        id: hoverRect
        width: 100
        height: 50
        color: mouseArea.containsMouse ? "lightblue" : "gray"
        anchors.centerIn: parent

        // 关键:启用悬停并设置光标形状
        MouseArea {
            id: mouseArea
            anchors.fill: parent
            hoverEnabled: true  // 必须启用悬停检测
            cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor

            // 其他交互(如点击)可在此添加
            onClicked: console.log("Clicked!")
        }

        Text {
            text: "悬停我"
            anchors.centerIn: parent
        }
    }
}

属性说明:

  1. hoverEnabled: true
    必须显式设置为true才能启用悬停状态检测(默认是false)。
  2. cursorShape
    根据containsMouse属性动态切换光标:
  • Qt.PointingHandCursor:手型图标(表示可点击)
  • Qt.ArrowCursor:默认箭头图标

其他常用光标形状:

光标类型说明
Qt.ArrowCursor默认箭头 (默认)
Qt.PointingHandCursor手型 (链接/可点击)
Qt.CrossCursor十字准星
Qt.IBeamCursor文本输入(I型)
Qt.WaitCursor等待(沙漏/圆圈)
Qt.SizeAllCursor移动/拖拽(四向箭头)
Qt.OpenHandCursor张开的手掌(可拖拽)

注意事项
  1. 多层嵌套时,最内层的MouseArea会覆盖外层的光标设置
  2. 在触摸屏设备上,光标变化不会生效(需额外设计悬停反馈)

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇