QML学习(2)

 

昨天对QML已经有了一个非常大的了解，可以随意创建一个静态的场景了，虽然可以小兴奋一下了，但我们还是应该牢记，革命尚未成功，同志仍需努力。

 

既然我们说QML是用来描述场景的，那么场景中的物体就会进行交互，从本质上来说，QML将场景内的对象分为三个大的类别，基础物件类，例如文字，图像等，用户交互类，动作执行类。

 

接下来需要攻克的一个难点就是，如何与场景进行交互？

 

按照上边分的类别，学习场景进行交互的过程，其实就是学习用户交互对象的过程。但我们还是仅仅会学习“精髓”部分，因为这样大家才可以自己无限的扩展。其实本质上，大家有了前一篇文章的学习过程，应该即时不用看这篇文章也会学习的很不错的。

 

我比较喜欢需求驱动式的学习方法，这样对大家以后自己用也更加有实战意义。那现在我们来假想一个需求，上篇文章中我们创建了一个有图片，有文字的场景，现在让我们加入点交互，先简单点，鼠标点击图片，文字颜射变为红色。

 

如和添加鼠标点击交互呢？先来看看交互都有哪些对象可以用。

http://doc.qt.nokia.com/4.7/qml-basic-interaction-elements.html

 

从名字上来看，应该是MouseArea这个对象靠谱。打开对象描述，里边的属性大家可以自己熟悉了解，我会在后来的文章中提及一些比较重要的属性，在属性下边，是该对象的触发信号描述，这个非常重要，用户的交互就是发生了一个触发，我们需要如何交互，本质上就是对触发进行如何处理的过程。

 

先把上边任务的代码放上来

 

Rectangle

{

// 既然是场景，那肯定要设定个大小

width:500           // 场景的宽

height:500          // 场景的高

 

// 场景内包含的物体信息

 

// 显示文字信息的物体

Text

{

// 给这个对象起个名字

// 这样方便在其它地方修改这个对象属性信息

// 现在主要是方便鼠标点击后的处理

id:text

 

x:100

y:100

 

// 新增加属性，设置字体大小

font.pointSize:30

 

text:"I'm a pig"   // 为啥是英文？因为刚刚测试中文显示有点问题，BUG？

}

 

// 显示图片物体

Image

{

id:image

 

source:"qtlogo.png"

}

 

// 鼠标处理添加

MouseArea

{

// 定义鼠标点击的范围

// 总得定义点哪里吧？

anchors.fill: image

 

// 点击后的处理

// 将文字对象的颜色改为红色

onClicked:{ text.color="red"}

}

}

 

这个结果图片不好抓，大家就自己来跑跑测试看吧。

 

既然都这样了，不如我们来个更加好玩一点的，让鼠标滑到图片上时，图片变大，移出时变小。

 

Rectangle

{

// 既然是场景，那肯定要设定个大小

width:500           // 场景的宽

height:500          // 场景的高

 

// 场景内包含的物体信息

 

// 显示文字信息的物体

Text

{

// 给这个对象起个名字

// 这样方便在其它地方修改这个对象属性信息

// 现在主要是方便鼠标点击后的处理

id:text

 

x:100

y:100

 

// 新增加属性，设置字体大小

font.pointSize:30

 

text:"I'm a pig"   // 为啥是英文？因为刚刚测试中文显示有点问题，BUG？

}

 

// 显示图片物体

Image

{

id:image

 

source:"qtlogo.png"

}

 

// 鼠标处理添加

MouseArea

{

// 定义鼠标点击的范围

// 总得定义点哪里吧？

anchors.fill: image

 

// 点击后的处理

// 将文字对象的颜色改为红色

onClicked:{ text.color="red"}

 

// 需要先启动捕捉这个动作，默认不启动

// 默认不启动的原因，应该是这个动作可能会耗费不少的计算机资源

hoverEnabled:true

 

// 当鼠标进入图片领域，则放大图片1.5倍

onEntered:{image.width=image.width*1.5; image.height=image.height*1.5}

// 当鼠标离开图片领域，则恢复图片大小

onExited:{ image.width=image.width/1.5; image.height=image.height/1.5}

 

}

}

 

今天就先到这里吧，其它几个交互对象，大家可以先自己测试看看，相信自己测试以后更有发言权。