Qt使用教程之建立Qt Quick UI表单（四）

<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标签包含了所选用户的信息。

建立标签内容：

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. 在属性中重置行布局的高度。

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的文章！