Qt5 Windows编程：[2]Qt Quick 演示（一）

1、  打开Qt Creater

选择菜单  “文件”->"新建文件或项目"->"应用程序"->"Qt Quick Application"

点击“choosing”按钮，项目名称设为“Transitions”，路径选择桌面，点击下一步；

component  set 选择 “Qt Quick 2.1”，

其他默认，按提示完成项目创建，可以看到在桌面生成了Transitions的文件夹

2、找一张png的小图片，命名为“states.png”，放在Transitions文件夹里面；

在项目结构的“资源”->"qml.qrc"->"/"项右键选择“添加现有文件....”,选择states.png,将之导入项目中

3、点击左侧的设计图标，进入设计模式，在下方的资源列表中，将png资源拖拽如主设计面板

4、选中文本框删除；

选中拖入的图片，在右侧的属性面板中做如下调节：

Position：X：10；Y：20

Size：W：100；H：100

Is Visible  选中，

可以运行下看看效果

5、在右下侧面板中，拖入Rectangle矩形框。

6、设置Rectangle的属性。

Size：X：100；Y：100；

Color：#00000000

Border Color：#808080

Border：2

7、依下图设置Layout

8、在导航中，将MouseArea左键拖入rectangle1中；

然后，选中rectangel1，按Ctrl+C进行复制，两次Ctr+V粘贴，生成rectangle2和rectangle3；

9、设置rectangle2和rectangle3的属性；

除Layout外,其他属性跟rectangle1相同；

对于Layout，rectangle2设置左下方，rectangle3设置在右侧中部，如图

10、初步的运行结果如下