Qt5 Windows编程:[2]Qt Quick 演示(一)
1、 打开Qt Creater选择菜单 “文件”->"新建文件或项目"->"应用程序"->"Qt Quick Application"点击“choosing”按钮,项目名称设为“Transitions”,路径选择桌面,点击下一步;component set 选择 “Qt Quick 2.1”,其他默认,按提示完成项目创建,可以看到在桌面生成了Transitions的文件夹
![Qt5 Windows编程:[2]Qt Quick 演示(一)](https://exp-picture.cdn.bcebos.com/6bbfdd14f1c595eeb4f7b29327530688902c9a8e.jpg)
![Qt5 Windows编程:[2]Qt Quick 演示(一)](https://exp-picture.cdn.bcebos.com/91091efc77f7980e5f1746c5d4db3620b83a918e.jpg)
2、找一张png的小图片,命名为“衡痕贤伎states.png”,放在Transitions文件夹里面;在项目结构的“资源”->"q罪焐芡拂ml.qrc"->"/"项右键选择“添加现有文件....”,选择states.png,将之导入项目中
![Qt5 Windows编程:[2]Qt Quick 演示(一)](https://exp-picture.cdn.bcebos.com/274e9635dd8a59de4e308db5b370d5413b8c848e.jpg)
![Qt5 Windows编程:[2]Qt Quick 演示(一)](https://exp-picture.cdn.bcebos.com/a44e8afc508c9bced2cf8fc3d6dd884ce44afa8e.jpg)
3、点击左侧的设计图标,进入设计模式,在下方的资源列表中,将png资源拖拽如主设计面板
![Qt5 Windows编程:[2]Qt Quick 演示(一)](https://exp-picture.cdn.bcebos.com/e6ae36066b0192dd2c77b3471a87031c98c0f08e.jpg)
4、选中文本框删除;选中拖入的图片,在右侧的属性面板中做如下调节:Position:X:10;Y:20Size:W:100;H:100Is Visible 选中,可以运行下看看效果
![Qt5 Windows编程:[2]Qt Quick 演示(一)](https://exp-picture.cdn.bcebos.com/aebdff86242fa872bc28bb50bfdaf05e4b23e98e.jpg)
5、在右下侧面板中,拖入Rectangle矩形框。
![Qt5 Windows编程:[2]Qt Quick 演示(一)](https://exp-picture.cdn.bcebos.com/359bee5e4a237971d02a936c93196120a6cde38e.jpg)
6、设置Rectangle的属性。Size:X:100;Y:100;Color:#00000000Border Color:#808080Border:2
![Qt5 Windows编程:[2]Qt Quick 演示(一)](https://exp-picture.cdn.bcebos.com/6061b9cd0c6efbf237847063127bbbf4db58da8e.jpg)
7、依下图设置Layout
![Qt5 Windows编程:[2]Qt Quick 演示(一)](https://exp-picture.cdn.bcebos.com/db196cdade49610fb661a8b0a56817e950e1d28e.jpg)
8、在导航中,将MouseArea左键拖入rectangle1中;然后,选中rectangel1,按Ctrl+C进行复制,两次Ctr+V粘贴,生成rectangle2和rectangle3;
![Qt5 Windows编程:[2]Qt Quick 演示(一)](https://exp-picture.cdn.bcebos.com/16a84fe10ef85856910aad9053e9ccd2ba66cd8e.jpg)
9、设置rectangle2和re罕铞泱殳ctangle3的属性;除Layout外,其他属性跟rectangle1相同;对于Layout,rectangle2设置左下方,rectangle3设置在右侧中部,如图
![Qt5 Windows编程:[2]Qt Quick 演示(一)](https://exp-picture.cdn.bcebos.com/d9a8d2d2bb665159cf77159e8fe23ea23b42c78e.jpg)
![Qt5 Windows编程:[2]Qt Quick 演示(一)](https://exp-picture.cdn.bcebos.com/05a320a23a42a07af027b987673834bb18efc18e.jpg)
10、初步的运行结果如下
![Qt5 Windows编程:[2]Qt Quick 演示(一)](https://exp-picture.cdn.bcebos.com/18aebc5f0c14c27b8ab5833d2a46b7b1eff9398f.jpg)