若该文为原创文章，未经允许不得转载

原博主博客地址：https://blog.csdn.net/qq21497936

原博主博客导航：https://blog.csdn.net/qq21497936/article/details/102478062

本文章博客地址：https://blog.csdn.net/qq21497936/article/details/78552121

各位读者，知识无穷而人力有穷，要么改需求，要么找专业人士，要么自己研究

目录

前话

MouseArea

描述

拓展mouseEvent

属性

信号

Keys

关于KeyEvent

描述

属性

信号

红胖子(红模仿)的博文大全：开发技术集合（包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬结合等等）持续更新中...（点击传送门）

Qt开发专栏：qml开发（点击传送门）

   qml开发笔记(七)：输入元素鼠标输入MouseArea和键盘输入Keys

前话

       本章节笔记开始进入qml用户输入元素的介绍和学习，本篇章主要学习鼠标捕捉MouseArea和键盘捕捉Keys。

MouseArea

描述

       该元素主要是指定一个可以鼠标交互的区域，本身不可见，所以必须与可视化元素联合起来一起使用，一般是当作可视化区域的子对象存在。

拓展mouseEvent

       MouseEvent 是鼠标事件参数，其button 属性保存了被按下的鼠标按键标记， x、y 属性保存鼠标指针位置。还有一个比较重要的属性accepted ，如果你处理鼠标事件后不想这个事件再往下传递，就置其值为 true 。

属性

• acceptedButtons : Qt::MouseButtons [能接受的鼠标事件]
• containsMouse : bool [只读][鼠标是否在区域中按下，必须可接受的鼠标事件点击pressed后才会true，松开恢复false]
• cursorShape : Qt::CursorShape [鼠标在区域中显示的图标，很多种图标]

隐藏鼠标并屏蔽事件

Rectangle {
    width: 200;
    height: 200;
    color: "gray";
    MouseArea {
        anchors.fill: parent;
        id: mouse;
        cursorShape: Qt.IBeamCursor;
    }
}

• drag [拖动类别]
• drag.target : Item [指定拖动的目标对象id]
• drag.active : bool [目标对象是否正在被拖动]
• drag.axis : enumeration [拖动方式，横轴、纵轴或者两者都有]
• drag.minimumX : real [指定拖动的最小X坐标]
• drag.maximumX : real[指定拖动的最大X坐标]
• drag.minimumY : real [指定拖动的最小Y坐标]
• drag.maximumY : real[指定拖动的最大Y坐标]

Rectangle {
    id: container;
    width: 200; height: 200;
    color: "gray";
    Rectangle {
        id: rect;
// anchors.left: parent.left // 若打开此句，则左边一直与父窗口左边垂直，无法横向拖动了
        width: 50; height: 50;
        color: "red";
        opacity: (200.0 - rect.width - rect.x) / (200.0 - rect.width); // 拖动横轴影响透明度
        MouseArea {
            anchors.fill: parent;
            drag.target: rect;
            drag.axis: Drag.XAxis | Drag.YAxis;
            drag.minimumX: 0;
            drag.maximumX: container.width - rect.width;
            drag.minimumY: 0;
            drag.maximumY: container.height - rect.height;
        }
    }
}

• drag.filterChildren : bool [是否过滤掉子对象，过滤掉：鼠标点击先触发父对象后触发子对象]

Rectangle {
    width: 480
    height: 320
    Rectangle {
        x: 30; y: 30
        width: 300; height: 240
        color: "lightsteelblue"
        MouseArea {
            anchors.fill: parent
            drag.target: parent;
            drag.axis: "XAxis"
            drag.minimumX: 30
            drag.maximumX: 150
            drag.filterChildren: true
            onClicked: console.log("Clicked 11")
            Rectangle {
                color: "yellow"
                x: 50; y : 50
                width: 100; height: 100
                MouseArea {
                    anchors.fill: parent
                    onClicked: console.log("Clicked")
                }
            }
        }
    }
}

• drag.threshold : real [以拖动操作开始时的像素值确定阈值。默认情况下，这将绑定到与平台相关的值。此属性添加在qtquick 2.2中]
• enabled : bool [enabled属性来启用和禁用鼠标代理项目的处理。当禁用时，鼠标区域对鼠标事件透明]
• hoverEnabled : bool [默认情况下，鼠标事件只在响应按钮事件或按下按钮时处理。即使没有按下鼠标按钮，悬停也能处理鼠标事件，主要影响onTntered和onExited事件，默认是false需按下触发，设置为true后，则鼠标进入区域就触发]

Rectangle{
    color:"green"
    width: 28
    height: 28
    MouseArea{
        id:mouse;
        anchors.fill:parent
        hoverEnabled: true; // true-鼠标进入变色 false-鼠标进入后点击才变色，甚至焦点不在应用上
        onEntered: {
            parent.color="red";
        }
        onExited: {
            parent.color="green";
        }
     }
    Text {
        text: "mouseX:" + mouse.mouseX + " mouseY:" + mouse.mouseY;
    }
}

• mouseX : real [鼠标x坐标，相对于其父]
• mouseY : real [鼠标y坐标，相对于其父]
• pressed : bool [只读][鼠标按键是否被按住]
• pressedButtons : MouseButtons [只读][按住的按钮]
• preventStealing : bool [这个属性保存是否鼠标事件可以从MouseArea偷来的，默认是false，如果一个MouseArea放在一项过滤孩子鼠标事件，如flickable，鼠标事件可能被盗MouseArea如果手势是由父项的认可，例如滑动手势。如果preventstealing设置为true，没有项目会偷鼠标事件。注意设置preventstealing真正一旦项目开始盗窃事件将不会影响到下一个新闻事件。]
• propagateComposedEvents : bool [这个属性保存是否由鼠标事件会自动传播到其他mouseareas重叠这MouseArea但低视觉堆叠顺序。默认情况下，此属性为false]

信号

• onCanceled()

       当鼠标事件被取消时，该调用程序被调用，这是因为事件不被接受，或者是因为另一个项目窃取了鼠标事件处理。这个信号是用于高级用途：它是有用的当有多个MouseArea，处理输入，或出现在flickable个MouseArea。在后一种情况下，如果你执行一些逻辑上的压力信号并开始拖动，鼠标的flickable偷MouseArea处理。在这种情况下，复位逻辑当MouseArea失去了鼠标操作的flickable，onCanceled也要和onReleased一起处理。

• onClicked(MouseEvent mouse)

       当单击时，调用这个处理程序。该动作定义为onRelease后触发，内部MouseArea（压、外移MouseArea，然后回到里面和释放也被认为是一个点击）。鼠标参数提供关于单击的信息，包括单击释放的x和y位置，以及单击是否被保留。（注：该鼠标事件参数中的accepted属性被忽略）。

• onDoubleClicked(MouseEvent mouse)

       这个处理程序在双击时被调用（一个按下然后一个释放紧跟着一个按钮）。鼠标参数提供关于单击的信息，包括单击释放的x和y位置，以及单击是否被保留。如果鼠标参数接受属性设置为在处理虚假的onPressed / onReleased / onClicked句柄将被称为第二点击；否则被抑制。接受的属性默认为true。

• onEntered()

       当鼠标进入鼠标区域时调用这个处理程序。默认情况下，onEntered处理器只叫当按钮被按下才触发。设置hoverEnabled为true时，只要进入鼠标区域就触发onEntered。

• onExited()

       当鼠标退出鼠标区域时调用这个处理程序。默认情况下，onExited处理器只叫当按钮被按下。设置hoverEnabled为true时，没有按下鼠标按钮，离开区域会触发onExited。

• onPositionChanged(MouseEvent mouse)

       鼠标位置改变时调用这个处理程序。鼠标参数提供有关鼠标的信息，包括x和y位置，以及当前按下的任意按钮。（注：该鼠标事件参数中的accepted属性被忽略）。

默认情况下，onpositionchanged处理器只叫当按钮被按下。设置hoverenabled真正使处理onpositionchanged时没有按下鼠标按钮。

• onPressAndHold(MouseEvent mouse)

       长按压时，此处理程序（目前800ms）被调用。鼠标参数提供有关按压的信息，包括新闻的X和Y位置，以及按下哪个按钮。（注：该鼠标事件参数中的accepted属性被忽略）。

• onPressed(MouseEvent mouse)

       这个处理程序被调用时，有一个按压。鼠标参数提供有关按压的信息，包括x和y位置以及按下哪个按钮。

       该事件的参数接受的属性决定这是否MouseArea将应对媒体和未来所有鼠标事件直到释放。默认是接受事件和不允许其他MouseArea在这一处理事件。如果被设置为false，没有进一步的事件将被发送到这个MouseArea直到按钮下压。

• onReleased(MouseEvent mouse)

   当释放时调用这个处理程序。鼠标参数提供关于单击的信息，包括单击释放的x和y位置，以及单击是否被保留。（注：该鼠标事件参数中的accepted属性被忽略）。

• onWheel(WheelEvent wheel)

该处理程序响应鼠标轮和触控板滚动手势。滚轮参数有关事件的信息提供，包括X和Y的位置，按下任何按钮目前，关于滚轮的运动，包括angleDelta和 pixelDelta。

Keys

关于KeyEvent

        KeyEvent 代表一个按键事件，如果一个按键被处理， event.accepted 应该被设置为 true 以免它被继续传递；要是不设置它，那它可能会继续传递给其他的 item ，出现一些比较奇葩的现象。

描述

       所有可视的原始对象都支持按键处理，按键可以通过onPressed和onRelease信号处理。

keyEvent信号特性有一个参数，称为事件的事件细节，如果是一个关键的处理，event.accpepted应该设置为true，从而阻止其继续向其他层次传播。

属性

• enabled : bool [设置项，默认为true，设置true的时候按键消息会被触发，否则不会被触发，可理解为按键使能]
• forwardTo : list<Object> [此属性提供了将键输入键、键释放和键盘输入从输入方法转发到其他项的方法。当你想要一个Item来处理一些键（例如上下箭头键）和另一个处理其他键的项（例如左右箭头键）时，这一点很有用。一旦被转发的键接受事件，它就不再被转发到列表后面的项目]

Item {
    ListView {
        id: list1
        // ...
    }
    ListView {
        id: list2
        // ...
    }
    Keys.forwardTo: [list1, list2]
    focus: true
}

• priority : enumeration[这个属性决定了在附加项的键处理之前或之后是否处理这些键。

            Keys.BeforeItem（默认）-在正常处理之前处理。如果事件被接受，它将不会被传递到该项。

            Keys.AfterItem-在正常处理之后处理。如果项接受键事件，则不会由键附加的属性处理程序处理。

信号

       按键有对应信号的则触发对应信号的press，如数字键对应onDeletePressed，如果先响应了onDeletePressed就不会再触发onPressed了，若没有响应onDeletePressed则可以触发onPressed，没有对应信号的就触发onPressed信号，松开始都会触发onRelease信号，有一些组合按键也会触发信号，如onBacktabPressed。总共有39个信号。

       长按键，除了几个控制按键（shift、ctrl、atl按下pressed状态可保持），其余的按键会在短暂停顿后变成连续按键（与以往的windows程序不同）。

下面测试按键消息程序（包含所有测试消息），直接赋值粘贴可运行测试

Rectangle {
    width: 400;
    height: 400;
    color: "gray";
    focus: true;
    Keys.onAsteriskPressed:  console.log("onAsteriskPressed");
    Keys.onBackPressed:      console.log("onBackPressed");
    Keys.onBacktabPressed:   console.log("onBacktabPressed");
    Keys.onCallPressed:      console.log("onCallPressed");
    Keys.onCancelPressed:    console.log("onCancelPressed");
    Keys.onContext1Pressed:  console.log("onContext1Pressed");
    Keys.onContext2Pressed:  console.log("onContext2Pressed");
    Keys.onContext3Pressed:  console.log("onContext3Pressed");
    Keys.onContext4Pressed:  console.log("onContext4Pressed");
    Keys.onDeletePressed:    console.log("onDeletePressed");
    Keys.onDigit0Pressed:    console.log("onDigit0Pressed");
    Keys.onDigit1Pressed:    console.log("onDigit1Pressed");
    Keys.onDigit2Pressed:    console.log("onDigit2Pressed");
    Keys.onDigit3Pressed:    console.log("onDigit3Pressed");
    Keys.onDigit4Pressed:    console.log("onDigit4Pressed");
    Keys.onDigit5Pressed:    console.log("onDigit5Pressed");
    Keys.onDigit6Pressed:    console.log("onDigit6Pressed");
    Keys.onDigit7Pressed:    console.log("onDigit7Pressed");
    Keys.onDigit8Pressed:    console.log("onDigit8Pressed");
    Keys.onDigit9Pressed:    console.log("onDigit9Pressed");
    Keys.onDownPressed:    console.log("onDownPressed");
    Keys.onEnterPressed:    console.log("onEnterPressed");
    Keys.onEscapePressed:   console.log("onEscapePressed");
    Keys.onFlipPressed:      console.log("onFlipPressed");
    Keys.onHangupPressed:    console.log("onHangupPressed");
    Keys.onLeftPressed:      console.log("onLeftPressed");
    Keys.onMenuPressed:      console.log("onMenuPressed");
    Keys.onNoPressed:        console.log("onNoPressed");
    Keys.onPressed:          console.log("onPressed");
    Keys.onReleased:         console.log("onReleased");
    Keys.onReturnPressed:    console.log("onReturnPressed");
    Keys.onRightPressed:     console.log("onRightPressed");
    Keys.onSelectPressed:    console.log("onSelectPressed");
    Keys.onSpacePressed:     console.log("onSpacePressed");
    Keys.onTabPressed:       console.log("onTabPressed");
    Keys.onUpPressed:        console.log("onUpPressed");
    Keys.onVolumeDownPressed:console.log("onVolumeDownPressed");
    Keys.onVolumeUpPressed:  console.log("onVolumeUpPressed");
    Keys.onYesPressed:       console.log("onYesPressed");
}

• onAsteriskPressed(KeyEvent event) [对应按键“*”]
• onBackPressed(KeyEvent event) [对应按键“*”]
• onBacktabPressed(KeyEvent event) [对应按键“Shift+Tab”]
• onCallPressed(KeyEvent event)
• onCancelPressed(KeyEvent event)
• onContext1Pressed(KeyEvent event)
• onContext2Pressed(KeyEvent event)
• onContext3Pressed(KeyEvent event)
• onContext4Pressed(KeyEvent event)
• onDeletePressed(KeyEvent event) [对应按键“del”]
• onDigit0Pressed(KeyEvent event) [对应按键“0”]
• onDigit1Pressed(KeyEvent event) [对应按键“1”]
• onDigit2Pressed(KeyEvent event) [对应按键“2”]
• onDigit3Pressed(KeyEvent event) [对应按键“3”]
• onDigit4Pressed(KeyEvent event) [对应按键“4”]
• onDigit5Pressed(KeyEvent event) [对应按键“5”]
• onDigit6Pressed(KeyEvent event) [对应按键“6”]
• onDigit7Pressed(KeyEvent event) [对应按键“7”]
• onDigit8Pressed(KeyEvent event) [对应按键“8”]
• onDigit9Pressed(KeyEvent event) [对应按键“9”]
• onDownPressed(KeyEvent event) [对应按键“下”]
• onEnterPressed(KeyEvent event)
• onEscapePressed(KeyEvent event)
• onFlipPressed(KeyEvent event)
• onHangupPressed(KeyEvent event)
• onLeftPressed(KeyEvent event)
• onMenuPressed(KeyEvent event)
• onNoPressed(KeyEvent event)
• onPressed(KeyEvent event) [没有处理对应信号，则所有按键都会触发该信号，否则有预先定义信号并且处理了的，是无法再触发onPressed信号]
• onReleased(KeyEvent event) [对应按键“”]
• onReturnPressed(KeyEvent event)
• onRightPressed(KeyEvent event)
• onSelectPressed(KeyEvent event)
• onSpacePressed(KeyEvent event)
• onTabPressed(KeyEvent event) [对应按键“Tab”]
• onUpPressed(KeyEvent event)
• onVolumeDownPressed(KeyEvent event)
• onVolumeUpPressed(KeyEvent event)
• onYesPressed(KeyEvent event)

原博主博客地址： https://blog.csdn.net/qq21497936

原博主博客导航： https://blog.csdn.net/qq21497936/article/details/102478062

本文章博客地址： https://blog.csdn.net/qq21497936/article/details/78552121