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

Stella981
• 阅读 665

**<Qt Enterprise最新版下载**>

创建主视图

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

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

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

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

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

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

  1. 在Id字段中输入_icon_。

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

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

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

Qt使用教程之创建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使用教程之创建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的文章

点赞
收藏
评论区
推荐文章
Stella981 Stella981
3年前
Qt使用教程之添加工具包
<QtEnterprise最新版下载(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.evget.com%2Fproduct%2F3579%2Fdownload)\用于构建并运行项目的QtCreator组设置的工具包使跨平台和跨配置开发变得更加容易。每个工具包都包
Wesley13 Wesley13
3年前
VAPS解释什么是有限产能调度?
VARCHARTXGantt(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.evget.com%2Fproduct%2F188)是一款功能强大的甘特图控件,其模块化的设计让您可以创建满足需要的应用程序。XGantt可用于.NET,ActiveX和ASP.NET应用程序,可以快
Stella981 Stella981
3年前
QT软件的安装与使用(Win7与Ubuntu20.04)
本文介绍QT软件的下载与安装。一、下载QT软件可以从QT官网下载安装,下载网址为:http://download.qt.io/archive/qt/(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fdownload.qt.io%2Farchive%2Fqt%2F)。当前最新
Stella981 Stella981
3年前
JIRA Servcie Desk v3.2版本发布,新增多个实用功能
点击立即下载(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.evget.com%2Fproduct%2F3824%2Fdownload)JIRAServiceDesk最新版试用!更多关于项目管理的相关资讯请猛戳\这里<<(https://www.oschina.
Stella981 Stella981
3年前
New!适用.NET Core和.NET 5.0的Telerik UI for WinForms设计器
TelerikUIforWinForms最新版下载(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.evget.com%2Fproduct%2F1642%2Fdownload)全新的.NETCoreTelerikWinForms(https://www.osc
Wesley13 Wesley13
3年前
VARCHART XGantt机器故障时进行正确的资源调度
VARCHARTXGantt(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.evget.com%2Fproduct%2F188)是一款功能强大的甘特图控件,其模块化的设计让您可以创建满足需要的应用程序。XGantt可用于.NET,ActiveX和ASP.NET应用程序,可以快
Wesley13 Wesley13
3年前
VARCHART XGantt 用例:链接作为HTML5 Gantt中的依赖项可视化
VARCHARTXGantt(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.evget.com%2Fproduct%2F188)是一款功能强大的甘特图控件,其模块化的设计让您可以创建满足需要的应用程序。XGantt可用于.NET,ActiveX和ASP.NET应用程序,可以快
Wesley13 Wesley13
3年前
VARCHART XGantt 用例研究:APS改进您的交货时间承诺
VARCHARTXGantt(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.evget.com%2Fproduct%2F188)是一款功能强大的甘特图控件,其模块化的设计让您可以创建满足需要的应用程序。XGantt可用于.NET,ActiveX和ASP.NET应用程序,可以快
Wesley13 Wesley13
3年前
VARCHART XGantt VSW资讯:HTML5甘特图中的各个资源工作时间
VARCHARTXGantt(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.evget.com%2Fproduct%2F188)是一款功能强大的甘特图控件,其模块化的设计让您可以创建满足需要的应用程序。XGantt可用于.NET,ActiveX和ASP.NET应用程序,可以快
Stella981 Stella981
3年前
PDF组件Spire.PDF 教程:在C#中显示PDF文件的打印预览
本文演示如何使用Spire.PDF(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.evget.com%2Fproduct%2F3377%2Fdownload)和c#在Windows窗体应用程序中显示PDF文件的打印预览。在使用下面的代码之前,我们需要创建一个Windows窗