文档章节

Qt使用教程之创建Qt Quick应用程序(二)

Miss_Hello_World
 Miss_Hello_World
发布于 2016/01/27 10:11
字数 756
阅读 267
收藏 1

<Qt Enterprise最新版下载>

创建主视图

应用程序的主视图在屏幕的左上角和两个空的矩形框中显示Qt logo。想要在您的应用程序中使用qt-logo.png图像,您就必须将其从Qt示例目录复制到项目目录中(因为与QML文件的子目录相同),该图像会出现在Resources中。您也可以使用其他图像或一个QML类型来代替。

1. 在Projects视图中,双击MainForm.ui.qml文件在Qt Quick Designer中打开它。

创建Qt Quick应用程序(二)

2. 在Navigator中选择RowLayout并点击Delete来删除它。

3. 在Library > Resources中,选择qt-logo.png并将其拖动到导航器的项目中。

创建Qt Quick应用程序(二)

  1. 在Id字段中输入icon

  2. 在Position字段中将X设置为10,Y设置为20。

4. 在Projects视图中右键单击资源文件:qml.qrc,然后选择Add Existing File来为部署添加qt-logo.png到资源文件中。

5. 在导航器中拖放一个Rectangle到页面中,并编辑其属性。

创建Qt Quick应用程序(二)

  1. 在Id字段中输入opLeftRect

  2. 在Size字段中,将W设置为46,H设置为55,使矩形的大小与图像的尺寸匹配。

  3. 在Color字段中,点击Transparent按钮使矩形透明。

  4. 在Border color字段中,将边框颜色设置为#808080。

  5. 在Border color字段中,选择6来创建圆角矩形。

  6. 点击Layout,然后点击左上角的anchor按钮将矩形锚定在页面的左上角。

  7. 在Margin字段中,选择顶部锚定为20,左边锚定为10。

创建Qt Quick应用程序(二)

6. 在导航器中,从Library中拖动一个Mouse Area类型到topLeftRect中。

7. 点击Layout,然后单击Fill to Parent按钮来锚定鼠标区域的矩形。

8. 在导航器中。复制topLeftRect(按Ctrl+C)并将其两次粘贴到导航器的页面中(按Ctrl+ V)。Qt Creator重新命名topLeftRect1和topLeftRect2类型的新实例。

9. 选择topLeftRect1并编辑它的属性:

  1. 在Id字段输入middleRightRect。

  2. 在Layout中选择垂直中心锚定按钮和右锚定按钮,来固定矩形到屏幕中间的右边距。

  3. 在Margin字段中,设置右锚定为10,设置垂直中心锚定为0。

10. 选择topLeftRect2并编辑它的属性:

  1. 在Id字段输入bottomLeftRect 。

  2. 在Layout中选择底部和左锚定按钮,将矩形固定到屏幕左下角。

  3. 在Margin字段中,设置底部锚定为20,设置左锚定为0。

11. 在导航器中,为每种类型选择Export按钮来导出所有类型作为属性,这使您可以在main.qml文件中使用属性。

12. 按Ctrl+S来保存更改。

想要检查您的代码,您可以在编辑模式下打开MainForm.ui.qml并将其与MainForm.ui.qml示例文件进行对比。用户界面现已准备好,您可以切换到编辑模式来编辑main.qml文件,将动画添加到应用程序中。

有兴趣的朋友可以点击查看更多有关Qt的文章

© 著作权归作者所有

共有 人打赏支持
Miss_Hello_World
粉丝 18
博文 668
码字总数 404202
作品 0
九龙坡
【盘点】全面强大开发框架Qt资源汇总

Qt最早诞生于1991年,在全世界开发者中享有盛誉。Qt Enterprise v5.5是目前最先进、最完整的跨平台C++开发工具。它不仅完全实现了一次编写,所有平台无差别运行,更提供了几乎所有开发过程中...

Miss_Hello_World
2016/02/25
87
0
Qt使用教程之创建Qt Quick项目

<Qt Enterprise最新版下载> Qt长期以来一直以“linux平台下,最著名的开发平台”身份在全世界开发者中享有盛誉。Qt Enterprise v5.5是目前最先进、最完整的跨平台C++开发工具。它不仅完全实现...

Miss_Hello_World
2015/10/20
141
0
一周盘点 | 跨平台移动Web开发框架DevExtreme在线演示等你来体验!

更多资源及工具也可以在【用户界面专题】找到,及时了解最新动态>> DevExpress (1)DevExpress Demo示例展示:支持响应式设计的DevExtreme Web UI开发框架 | 附在线演示 DevExtreme Web为触...

百mumu
2016/01/18
65
0
Qt使用教程之使用Qt Quick UI表单(一)

<Qt Enterprise最新版下载> 本教程介绍如何使用ui.qml文件开发一个应用程序,使应用程序逻辑从UI中分离。该教程使用Qt Quick Designer实现一个简化版的UI表单示例,它为一个客户数据库提供接...

Miss_Hello_World
2016/02/05
107
0
Qt使用教程之指定生成设置(二)

<Qt Enterprise最新版下载> 在指定生成设置(一)一文中,我们为大家介绍了编辑生成配置、启动外部进程、使用环境变量以及使用Qt Creator变量等内容。在本文中我们将继续为大家介绍如何生成步...

Miss_Hello_World
2015/11/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【大福利】极客时间专栏返现二维码大汇总

我已经购买了如下专栏,大家通过我的二维码你可以获得一定额度的返现! 然后,再给大家来个福利,只要你通过我的二维码购买,并且关注了【飞鱼说编程】公众号,可以加我微信或者私聊我,我再...

飞鱼说编程
今天
1
0
Spring5对比Spring3.2源码之容器的基本实现

最近看了《Spring源码深度解析》,该书是基于Spring3.2版本的,其中关于第二章容器的基本实现部分,目前spring5的实现方式已有较大改变。 Spring3.2的实现: public void testSimpleLoad(){...

Ilike_Java
今天
1
0
【王阳明心学语录】-001

1.“破山中贼易,破心中贼难。” 2.“夫万事万物之理不外于吾心。” 3.“心即理也。”“心外无理,心外无物,心外无事。” 4.“人心之得其正者即道心;道心之失其正者即人心。” 5.“无...

卯金刀GG
今天
2
0
OSChina 周三乱弹 —— 我们无法成为野兽

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ _刚刚好: 霸王洗发水这波很骚 手机党少年们想听歌,请使劲儿戳(这里) hahahahahahh @嘻酱:居然忘了喝水。 让你喝可乐的话, 你准忘不了...

小小编辑
今天
11
0
vm GC 日志 配置及查看

-XX:+PrintGCDetails 打印 gc 日志 -XX:+PrintTenuringDistribution 监控晋升分布 -XX:+PrintGCTimeStamps 包含时间戳 -XX:+printGCDateStamps 包含时间 -Xloggc:<filename> 可以将数据保存为......

Canaan_
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部