Qt使用教程之使用Qt Quick UI表单（二）

<Qt Enterprise最新版下载>

建立UI表单主视图

应用程序的主视图在一个表视图中显示一个客户列表，并在表视图中选中有关客户的详细信息。

建立主视图：

1. 在Projects view (1)中，双击MainForm.ui.qml文件在Qt Quick Designer中打开它。

2. 在Navigator (2)中，选择RowLayout并使用Delete键来删除它。

3. 在Library > QML Types (3)中，选择SplitView并将其拖动到导航器的Item中。

4. 在导航器中选择split视图，在Properties (4)中选择Layout标签，而后单击Fill to Parent按钮来锚定split视图到项目中。

5. 从库中拖动TableView和Tab View到导航器的split视图中。

6. 在导航器中选择Export按妞导出表视图做为属性。

7. 右键单击TabView打开上下文菜单，并选择Add Tab建立一个标签元素。Qt Creator建立一个元素做为单独的QML文件，您能够在对话框中输入它的名称。默认状况下，该元素被命名为Tab。

8. 在导航器中选择标签，而且在属性中输入Customer Settings到Title字段中。

9. 按Ctrl+ C将标签复制到剪贴板，您能够Ctrl+V两次来建立两个标签并将其命名为Customer Notes和Customer History。Qt Creator使用MainForm.ui.qml文件中的Tab类型，您将为之后的标签内容建立单独的UI表单。

编辑表视图

Qt Quick Designer不支持添加列TableView类型，所以您必须使用代码编辑器添加它们。想要在Edit模式下保持编辑MainForm.ui.qml文件的最小值，移动TableView类型到一个单独的被命名为CustomerTableView.qml的QML文件中：

1. 单击Edit在Edit模式下打开MainForm.ui.qml。

2. 移动TableView类型到一个单独的QML文件中，右键单击它并选择 Refactoring > Move Component into Separate File。

3. Qt Creator从CustomerTableView.qml示例文件中添加代码到文件中。

有兴趣的朋友能够点击查看更多有关Qt的文章！