使用Qt Designer创建界面

Qt编程 专栏收录该内容
108 篇文章 20 订阅

在博客 在Qt中使用C++代码创建界面 (地址:http://blog.csdn.net/rl529014/article/details/51345619)中,我讲了如何通过纯C++代码来创建Qt图形界面,

这是传统的GUI程序开发方式,只使用C++代码,C++既负责设计界面,也负责处理业务逻辑。


界面是用户能够直接看到的,称为“前端”;业务逻辑的处理用户看不到,在背后默默进行,称为“后台”。

  • 传统的GUI程序开发不区分前端和后台,统一使用C++代码管理,源文件中既有创建和设置控件的代码,又有处理业务逻辑的代码,非常杂乱。

  • 使用C++代码直接创建控件,不管是从语法上讲还是从代码量上讲,看起来都比较“麻烦”。学过web开发的朋友应该会有体会,网页就是将前端和后台无缝集成的经典例子。

  • 在网页中,我们能看到的各种文字、颜色、图片、布局、按钮、菜单、列表等界面元素都是使用HTML+CSS(专门用来设计界面的声明式语言)创建的,而后台逻辑才需要JavaScript、Python、PHP、Java等编程语言来处理。

  • 现代GUI程序的设计,或许也借鉴了Web开发的思想,可以使用 XML 来设计界面,使用C++来处理后台逻辑,在 Qt 中可以轻而易举的做到前端和后台分离,从而让代码逻辑更加清晰,开发更加高效。


使用Qt Designer

Qt Designer 是与 Qt 配套的界面设计工具,使用它可以轻而易举的拖拽出简单的界面,下面我们就来学习一下。


在博客   在Qt中使用C++代码创建界面”  中讲到了,创建 Qt Widgets Application 项目的第四步是填写类信息,

如下图所示:



“创建界面”选项默认是被勾选的。


项目创建完成后可以看到,勾选了“创建界面”选项,IDE 会多生成一个mainwindow.ui文件,如下图所示:


双击 mainwindow.ui,就可以进入设计模式,启动 Qt Designer,如下图所示:



再切换回编辑模式,就可以看到 mainwindow.ui 的源代码,如下图所示:



.ui文件是 Qt Designer 的界面设计文件,由 XML 代码构成。Qt Creator 不允许在编辑模式下修改 .ui 文件,只能切换到设计模式由 Qt Designer 自动生成。


XML是一种标记语言(也称声明式语言),由一个一个地节点组成,每个节点还可以包含多个属性,HTML 就是 XML 的一种具体化。
XML 是程序员必备的技能,也很简单,开发中会经常用到,可以不熟练,但要有所了解。

在编辑区看到的界面,仅包含了程序的客户区,没有包含标题栏,所以不会看到最大化、最小化、关闭等常见按钮。


新创建的程序,默认包含了菜单栏、工具栏和状态栏。如下图所示:



大家可以从左侧的控件箱中拖拽几个控件到编辑区的窗口中,亲自测试一下效果。如下图所示:(左侧控件箱中的控件都可以用鼠标拖到编辑区域,)



下图是我拖拽出的一个记事本界面。运行结果为:


  • 4
    点赞
  • 1
    评论
  • 15
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值