Qt使用教程:使用Qt Quick UI表单(五)

原创|使用教程|编辑:龚雪|2016-03-07 09:03:47.000|阅读 473 次

概述:本教程介绍如何使用ui.qml文件开发一个应用程序,使应用程序逻辑从UI中分离。该教程使用Qt Quick Designer实现一个简化版的UI表单示例,它为一个客户数据库提供接口,只用QML和JavaScript编写。

相关链接:

<Qt Enterprise最新版下载>

创建标签

创建注释标签

该Customer Notes标签包含了一个关于所选客户和取消或保存更改的输入文本区域。创建标签内容:

1. 在Projects视图中双击NotesForm.ui.qml打开它并在Design模式下进行编辑。

2. 在Navigator中选择Item,然后在Properties的Id字段中输入content。

3. 在Library中选择Imports > Add Import,然后导出Qt Quick控件和布局。

4. 从库中拖动一个Column Layout到导航器的content项中。

5. 选择 Layout > Top、Left和Right按钮来锚定网格布局到母体中,并将边距设置为12.

6. 从库中拖动一个Text Area到列布局中。

7. 在属性中选择Layout>Fill width和Fill height,将文本区域填充到列布局中。

8. 在Creating the Settings Tab中创建Save和Cancel按钮作为指示,您还可以从SettingsForm.ui.qml中复制粘贴行布局。

9. 在导航器中,为每个字段选择Export,导出该字段IDs作为属性。下面的项应该被导出,以便它们可以在Notes.qml中被引用:

property alias textArea1: textArea1
property alias cancel: cancel
property alias save: save
创建历史标签

Customer History标签包含了一个表格视图,该视图显示客户进行的事务处理。创建一个您可以在Edit模式下编辑的自定义HistoryTableView类型,对于历史标签,您不需要ui.qml文件。

创建历史标签:

1. 在Projects视图中,右键单击qml.qrc然后选择Add New > Qt > QML File (Qt Quick 2)创建HistoryTableView.qml文件,并将其添加到项目中。

2. 从HistoryTableView.qml中复制执行情况。

3. 从示例History.qml文件中添加代码到您的History.qml文件中来访问代码模型。

添加标签功能

在标签中添加功能用于从客户模型中显示数据,您必须创建所需的文件。现在,您需要从Settings.qml文件中复制设置标签的执行情况,同时还需要从Notes.qml文件中复制注释标签的执行情况。

想要在主视图中显示标签内容,需要在Design模式中设置QML文件作为标签的资源。在Navigator中选择设置标签,然后在Properties视图的Source字段中指定示例Settings.qml。以类似的方式指定注释和历史标签。

然后,您可以删除Tab.qml文件生成的向导,您不需要再上下文菜单中选择Remove File。

购买Qt Enterprise最新正版授权!详情请"咨询在线客服"
葡萄城经典UI产品惠风迎春,惊喜折扣礼品送不停!优惠详情点击查看>>
强大工具Qt新版发布,慧都助力——解决方案大放送!优惠详情点击查看>>


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

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

文章转载自:慧都控件网

登录 慧都网发表评论


慧都网友 2016-03-07 11:01:55.000
0

Qt如今还能创建3D的用户界面,包含桌面和嵌入式设备,超级棒!


为你推荐

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

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

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