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

原创|使用教程|编辑:龚雪|2016-02-17 09:07:59.000|阅读 1025 次

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

相关链接:

<Qt Enterprise最新版下载>

创建UI表单主视图

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

使用Qt Quick 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 Enterprise最新正版授权!详情请"咨询在线客服"

新年新禧新气象,送礼送福送优惠!优惠详情点击查看>>



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

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

文章转载自:慧都控件网

登录 慧都网发表评论


慧都网友 2016-02-17 11:24:29.000
0

Qt初级选手,看了这个教程觉得非常有用,不错!


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
在线
客服
在线
QQ
电话
咨询
400-700-1020
购物车 反馈 返回
顶部
在线客服系统
live chat