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

原创|使用教程|编辑:龚雪|2016-03-01 09:25:34.000|阅读 664 次

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

相关链接:

<Qt Enterprise最新版下载>

创建标签

您可以使用新的文件向导来创建UI表单,可用于指定标签内容和功能。您可以在MainForm.ui.qml文件中设置QML文件作为标签的资源,同时还可以在Design模式下修改对应的UI表单。

创建标签内容的UI表单

想要创建标签内容的UI表单:

1. 选择File > New File or Project > Qt > QtQuick UI File > Choose。

2. 在Component name字段中输入Settings。

3. 点击Next。

4. 点击Finish来创建UI表单、SettingsForm.ui.qml、一个相应的QML file和Settings.qml

用同样的方法创建注释标签的UI表单、NotesForm.ui.qml、相应的QML文件和Notes.qml。您不需要历史标签的ui.qml文件,在今后会为它创建QML文件。

创建Settings标签

Customer Settings标签包含了所选用户的信息。

使用Qt Quick UI表单

创建标签内容:

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

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

3. 在Library中选择Imports > Add Import,然后导入Qt Quick控件和布局,使QML类型在库的这些模块中可见。

4. 从库中拖动一个Grid Layout到导航器的内容项中。

5. 选择Layout > Top, Left,Right按钮来锚定网格布局到母体中。

6. 在Margin字段中将边距设置为12。

7. 在Properties中,设置Column spacing和Row spacing为8,Columns为3,Rows为4。如果您想添加更多的字段,可以添加必要数量的行。

8. 从库中拖动4个Label控件、1个Combo Box和3个Text Field控件到导航器中。

9. 在导航器中使用向下箭头将一个标签移动到最后文本字段上面的位置。

10. 在属性中,更改Text字段中的每个字段的标签文本。您需要以下的标签:Title、First Name、Last Name和Customer Id。

11. 在属性中,更改Placeholder text字段的每个文本字段的占位符文本,使其和字段标签一样。

12. 选择客户ID文本字段,然后在属性中选择Layout,将Column span设置为3,使ID字段跨越网格布局的长度。

13. 从库中拖动一个Row Layout布局到导航器的content项中,然后点击它。

14. 在属性中重置行布局的高度。

使用Qt Quick UI表单

15. 选择Layout > Bottom和Right按钮来锚定行布局到母体中。

16. 在锚定的Margin字段中,将边距设置为12。

17. 从库中拖动2个Button控件到导航器的行布局中。

18. 在属性中,更改Text字段的按钮标签为Save和Cancel。

19. 在属性中为每个按钮选择Layout、> Fill width和 Fill height,使其填充到行布局的按钮中。

20. 在导航器中,为每个字段选择Export来导出字段ID作为属性。应该会导出以下的项目,以便可以在Settings.qml中引用它们:

property alias customerId: customerId
property alias lastName: lastName
property alias firstName: firstName
property alias gridLayout1: gridLayout1
property alias rowLayout1: rowLayout1

property alias save: save
property alias cancel: cancel
property alias title: title
购买Qt Enterprise最新正版授权!详情请"咨询在线客服"
葡萄城经典UI产品惠风迎春,惊喜折扣礼品送不停!优惠详情点击查看>>


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

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

文章转载自:慧都控件网

登录 慧都网发表评论


慧都网友 2016-03-01 11:03:24.000
0

Qt是个不错的工具,很强大,非常不错!


为你推荐

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

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

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