QT declarative UI 初探（三）

最新推荐文章于 2023-04-17 17:39:46 发布

cs199503

最新推荐文章于 2023-04-17 17:39:46 发布

阅读量452

点赞数

文章标签： ui c/c++ runtime

唔，五一长假，过的很郁闷，牙龈上火发炎。。。

第一时间去更新了一下4.7-stable，还是already up to date。其实在放假前在折腾declarative UI的时候就顺便发现了一个很严重的问题，就是4.7 技术预览版(以下简称4.7 tp)对中文的支持非常有问题，为了方便自己以后查阅，就先把这个问题给记在这里：

我开始是从qt.nokia.com下载的qtcreator tp和4.7 tp，因为4.7tp 没有做安装包，需要自己编译，于是我花了好几个小时来编译，结果当我打开新的qtcreator的时候，发现当我打开一个内含中文的代码文件的时候，中文显示是空白或乱码，并且稍稍拖动一下代码区的滚动条，qtcreator就崩溃了。。。

我怀疑是qtcreator的问题，于是我不打开代码文件，打开项目后就直接build，编译完后，发现程序中的中文出现了乱码—-这让我差点失去了继续了解declarative UI的动力。。。

过了两天，发现qt.nokia.com有Nokia QT SDK beta发布，于是download了一个下来看看，发现中文问题比前面的要好一点了，至少qtcreator打开有中文的代码文件会正常显示，并且拖动滚动条不会崩溃了，但编译出来的程序中文依然有乱码，这就是预览版和beta版的区别了，所以我的这些个学习都是在Nokia QT SDK beta上进行的。。。

拉拉杂杂写了这么多，下面进入主题。

我们先来创建一个Qt Quick Application。根据帮助文档，打开qt creator，File > New File or Project > Qt Quick Project > Qt QML Application > OK，如图：

点击 Finish就完成了项目创建。这样创建出来的项目，目前包含两个文件，一个.qmlproject文件，一个.qml文件。

.qmlproject定义了在项目文件夹中该项目所需要的所有的QML, JavaScript, 图片文件，这样定义的好处就是不用单独的一个个添加文件到项目中，打开.qmlproject文件一看就明白是什么意思了，以下是.qmlproject的文件内容：

/* File generated by QtCreator */
import QmlProject 1.0
Project {
/* Include .qml, .js, and image files from current directory and subdirectories */
QmlFiles {
directory: “.”
}
JavaScriptFiles {
directory: “.”
}
ImageFiles {
directory: “.”
}
/* List of plugin directories passed to QML runtime */
// importPaths: [ " ../exampleplugin " ]
}

好了，现在我们来开始一个hello world的实际编写吧。。。
我们的需求是实现一个简单的动画：界面上有依序排列的两个图像，当鼠标（左键）在界面任意位置按下时，两个图像的位置进行调换，鼠标释放则恢复原状。
我们就一步步的来实现这个需求：
1.打开QMLTest6.qml并切换到Edit模式；
2.修改width和height两个属性，这两个属性影响到了应用程序的界面大小，比如我们修改为常见的手持设备的屏幕大小宽为240，高为320；
3.切换回Design模式，可以看到设计窗口中的界面尺寸已经发生了相应的变化。我们把界面中原有的文本组件给删掉。从Library面板中拖入一个Rectangle组件。通过Properties面板中的Rectangle选项卡调整其背景色为绿色，Radius属性为50（圆形），通过Properties面板中的Geometry选项卡调整其位置和宽高，如图：

设计窗口中的组件

组件的Rectangle属性组中的各属性值

组件的Geometry属性组中的各属性值
4.Ctrl+C -> Ctrl+V 复制粘贴一个新的圆形，修改其颜色为蓝色，并调整其位置，最后效果如图：

5.在State面板中点击 + 按钮，添加一个新的state,如图：

6.从Library面板中拖一个Mouse Area组件到设计窗口，并修改组件的Rectangle属性组中的Layout为全屏（图标为：）；
7.切换到Edid模式，添加一个NumberAnimation Transition，这个代码的作用是：当超过500毫秒，则改变对象的x和y座标位置，代码如下：
transitions: [
Transition {
NumberAnimation { properties: "x, y"; duration: 500 }
}]
8.为State1添加第7步编写的Transition，在name: “State1″这行代码后加入一新行，写入when: mousearea1.pressed，作用是State1这个State,是由第6步拖入的Mouse Area组件响应鼠标pressed事件才发生；