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

>

创建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的文章>>