Qt Qucik事件处理

版权声明：欢迎大佬们指点 https://blog.csdn.net/bloke_come/article/details/81001030

MouseArea

enabled属性是用来设置是否启动鼠标处理，默认true，false为不处理鼠标事件

MouseEvent
鼠标事件：
onClicked()、onDoubleClicked()、onPressed()、onReleased()、onPressAndHold()
修改hoverEnabled属性可以获取鼠标光标的位置变化
此时可以使用onPositionChanged()、onEntered()、onExited()等处理函数
Qt.LeftButton鼠标左键、Qt.RightButton鼠标右键、Qt.MiddleButton鼠标中键
modifiers用来判断特殊按键
Qt.NoModifier 没有修饰按键
Qt.ShiftModifier shift按键
ControlModifier Clt按键
AltModifier Alt按键

import QtQuick 1.0
Rectangle
{
    width: 10;
    height: 100;
    color: "green";
    MouseArea
    {
        anchors.fill: parent;
        acceptedButtons: Qt.LeftButton | Qt.RightButton;
        onCilcked:
        {
            if (mouse.button == Qt.RightButton)
                parent.color = "blue";
            else if ((mouse.button == Qt.LeftButton)
                &&(mouse.modifiers & Qt.ShiftModifier))
                parent.color = "greer";
            else
                parent.color = "red";
        }
    }
}

这里实现的功能是,当按下鼠标右键时,Rectangle变为蓝色
当按下鼠标左键时,变为红色
而当在按着键盘上的 Shift键的同时按下鼠标左键,那么重新变为绿色

拖拽
drag.target属性用来指定拖动的项目的id
drag.active属性获取项目当前是否正在被拖动的信息
drag.axis属性用来指定属性拖动的方向,可以是水平方向(Drag.XAxIs)、垂直方向(Drag. YAxis)或者两个方向都可以(Drag. Xandyaxis)
drag.minimun和drag.maximum限制了项目在指定方向上拖动的距离

import QtQuick 1.0
Rectangle
{
    id: container;
    width: 600;
    height: 100;
    Rectangle
    {
        id: rect;
        width: 50;
        height: 50;
        color: "red";
        opacity: (600.0 - rect.x) / 600;
        MouseArea
        {
            anchors.fill: parent;
            drag.target: rect;
            darg.axis: Drag.XAxIs;
            darg.minimumX: 0;
            darg.maximumX: container.width - rect.width;
        }
    }
}

按键处理

普通按键的使用示例如下：

import QtQuick 1.0

Rectangle
{
    width: 100;
    height: 100;
    focus: true;// 获取焦点
    Keys.onPressed:
    {
        if(event.key == Qt.Key_A) //键盘事件event.key
        {
            console.log("Key A was Pressed");
            event.accepted = true;//防止时间向上层传递
        }
    }
}

通过KeyNavigation使用backtab、down、left、priority、right、tab和up
示例代码

import QtQuick 2.6
import QtQuick.Controls 2.2
import QtQuick.Window 2.2
// 通过Grid控件的实现
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("KeyNavigation")

    MainForm {
        anchors.fill: parent
        Grid
        {
            width: parent.width;
            height: parent.height;
            columns: 2;

            Rectangle
            {
                id: topLeft;
                width: parent.width * 0.5;
                height: parent.height * 0.5;
                color: focus ? "red" : "lightgray";//颜色修改
                focus: true;
                KeyNavigation.right: topRight;//右键跳到上面的有方块(直接跳到)
                KeyNavigation.down: bottomLeft;
            }
            Rectangle
            {
                id: topRight;
                width: parent.width * 0.5;
                height: parent.height * 0.5;
                color: focus ? "red" : "lightgray";
                KeyNavigation.left: topLeft;
                KeyNavigation.down: bottomRight;
            }
            Rectangle
            {
                id: bottomLeft;
                width: parent.width * 0.5;
                height: parent.height * 0.5;
                color: focus ? "red" : "lightgray";
                KeyNavigation.right: bottomRight;
                KeyNavigation.up: topLeft;
            }
            Rectangle
            {
                id: bottomRight;
                width: parent.width * 0.5;
                height: parent.height * 0.5;
                color: focus ? "red" : "lightgray";
                KeyNavigation.left: bottomLeft;
                KeyNavigation.up: topRight;
            }
        }
    }
}

// 通过锚(anchors)布局的实现
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("KeyNavigation")

    MainForm {
        anchors.fill: parent;
        Rectangle
        {
            id: topLeft;
            anchors.top: parent.top;
            anchors.left: parent.left;
            width: parent.width * 0.5;
            height: parent.height * 0.5;
            color: focus ? "red" : "lightgray";
            focus: true;
            KeyNavigation.right: topRight;
            KeyNavigation.down: bottomLeft;
        }
        Rectangle
        {
            id: topRight;
            anchors.left: topLeft.right;
            anchors.top: parent.top;
            width: parent.width * 0.5;
            height: parent.height * 0.5;
            color: focus ? "red" : "lightgray";
            KeyNavigation.left: topLeft;
            KeyNavigation.down: bottomRight;
        }
        Rectangle
        {
            id: bottomLeft;
            anchors.left: parent.left;
            anchors.top: topLeft.bottom;
            width: parent.width * 0.5;
            height: parent.height * 0.5;
            color: focus ? "red" : "lightgray";
            KeyNavigation.right: bottomRight;
            KeyNavigation.up: topLeft;
        }
        Rectangle
        {
            id: bottomRight;
            anchors.left: bottomLeft.right;
            anchors.top: topRight.bottom;
            width: parent.width * 0.5;
            height: parent.height * 0.5;
            color: focus ? "red" : "lightgray";
            KeyNavigation.left: bottomLeft;
            KeyNavigation.up: topRight;
        }
    }
}

运行效果如下

定时器

Timer
interval 设置时间间隔，毫秒，默认为1000ms；
repeat 设置是否重复触发，false只触发一次，并自动将running属性设置为false。默认值为false
running 定时器的开关，false为关，true为开
onTriggered()信号处理函数
还有restart()，start()， stop()

注意每次repeat 会重置定时器