QtQuick系列教程(5)-Qml开发界面介绍(Qml基础-4)

总目录传送

本博文技术等级: ★☆☆☆☆☆☆☆☆☆

实际开发中经常使用的qml元素已经介绍的差很少了, 接下来咱们来看看交互方面, 除了按钮的点击事件, 其余的不少交互方式都尚未介绍, 不着急, 一步一步来.

鼠标事件是最经常使用的, 好比鼠标移动到一个组件内, 左键右键滑轮什么的. 接上面的样例工程, 咱们继续改造
从button下手, 鼠标移入的时候,显示一张图片,移出的时候显示另一张.
鼠标移动的检测, qml中是有一个专门的组件, 叫MouseArea
下面咱们来在button1中增长代码

MouseArea{
                anchors.fill: parent//鼠标检测的做用域, 这里的父对象便是button1
                hoverEnabled: true//开启鼠标滑过检测
                onEntered: {//鼠标进入事件
                    image.source = "qrc:/menuBack.jpg";
                }
                onExited: {//鼠标离开事件
                    image.source = "qrc:/menuLogoBack.png";
                }
            }

运行一下

达到预期效果, 鼠标移动能够检测, 咱们知道若是要经过鼠标移动通常程序窗体在屏幕上的位置, 是须要拖动标题栏的. 也有不少程序是能够拖动空白地方的, 咱们试试目前这个, 抱歉 是不行的. 不过其实咱们也能够经过MouseArea来实现.

首先到咱们主窗体属性代码的下面, 增长MouseArea

MouseArea{
        anchors.fill: parent
        property point clickPos: "0,0"//定义一个点
        onPressed: {//按下事件
            clickPos  = Qt.point(mouse.x,mouse.y)//记录当前按下的点的位置
        }
        onPositionChanged: {//位置改变事件
            var delta = Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y)//从新记录当前按下的点的位置
            frmWindow.setX(frmWindow.x+delta.x)//经过x差值来横向移动窗体
            frmWindow.setY(frmWindow.y+delta.y)//经过y差值来纵向移动窗体
        }
    }

运行一下

细心的看官应该发现了一句奇怪的代码

property point clickPos: "0,0"//定义一个点

这是怎么定义出来的?
咱们先看看定义属性的的用法:
好比窗体的高宽的值 我定义出来

property int wHeight: 480//定义一个类型为整型名称是wHeight值是480的变量
    property int wWidth: 600//定义一个类型为整型名称是wWidth值是600的变量

运行代码, 窗体大小和咱们以前的是同样的
而后咱们在看看property的另一个重要使用方法, property alias, 定义一个组件或属性的别名
增长一行代码

property alias thisImage: image//定义一个名称为thisImage的变量做为image组件的别名

修改咱们的button1中MouseArea的代码, 把image替换为新定义出来的别名thisImage

运行, 看看是否同样, 结果是同样的, 说明别名的引用是有效的.
别名还能够用在外部组件调用内部组件的某些组件或者组件的属性时使用, 这点很重要.

鼠标检测大概说了下, 而后再看看键盘, 先改造一下Rectangle, 就是做为背景的那么红色框
但愿经过键盘的左右操做来移动这个框

Rectangle{
        height: 300
        width: 300
        color: "red"
        //anchors.centerIn: parent//注释了, 由于咱们想要经过键盘移动这个框, 因此不能让它定在中间
        focus: true//设置焦点, 这样窗体的焦点目标就是这个框
        Keys.enabled: true//设置监测键盘事件
        Keys.onPressed: {//键盘的按下事件
            if (event.key === Qt.Key_Left) {//左方向键
                parent.x -= 10
            }
            if (event.key === Qt.Key_Right) {//右方向键
                parent.x += 10
            }
        }

而后运行看看效果

搞定~ 打完收工

#### 联系方式:

---

做者	郑天佐
QQ	278969898
主页	http://www.camelstudio.cn
邮箱	camelsoft@163.com
博客	http://blog.csdn.net/zhengtianzuo06
github	https://github.com/zhengtianzuo
QQ群	199672080

---

捐赠

以为分享的内容还不错, 就请做者喝杯咖啡吧~~