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

原创|使用教程|编辑:龚雪|2016-01-26 09:03:50.000|阅读 1193 次

概述:本教程主要使用内置的QML类型并简单介绍Qt Quick的基本概念,同时还为大家介绍如何使用Qt Creator实现Qt Quick的状态和转换。

相关链接:

<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 Enterprise最新正版授权!详情请"咨询在线客服"

新年新禧新气象,送礼送福送优惠!优惠详情点击查看>>



标签:跨平台UI界面C/C++

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件网

登录 慧都网发表评论


慧都网友 2016-01-26 10:04:25.000
0

mark!非常详细的步骤,感谢分享!


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
Qt Enterprise

Qt是一个跨平台的C++图形用户界面应用程序开发框架。

在线
客服
在线
QQ
电话
咨询
400-700-1020
购物车 反馈 返回
顶部
在线客服系统
live chat