• 欢迎来到想想君的青玉案!
  • 欢迎来到我的酒馆,伙计!搓炉石的朋友请加我账号DarrenDing#5404,嘎嘎~

Qt设计可自适应的用户界面(Qt Designer篇)

学习Qt5 Darren Ding 634次浏览 6个评论

啊,美丽的Qt Designer

上回说到,博主陷入沉思:在Qt中,如何优雅地设计用户界面?百思不得其解,不如不思,一不小心睡着了。梦中神游太虚幻境,有点儿小激动哈!额,不过警幻仙子没有告知云雨之事,倒是传授了UI设计之法。仙子一语道破梦中人:所有的秘密都隐藏在Qt Desinger中!

博主在太虚幻境中隐约看到Qt Designer的样子,”风吹仙袂飘摇举,犹似霓裳羽衣舞”,如此绰约曼妙,让人欲罢不能。

好吧,今天博主打算把秘密说破,与众同乐。下面两段英文是Qt Designer的官方介绍,图一和图二是两种模式下的Qt Designer外观:

Qt Designer is the Qt tool for designing and building graphical user interfaces (GUIs) with Qt Widgets. You can compose and customize your windows or dialogs in a what-you-see-is-what-you-get (WYSIWYG) manner, and test them using different styles and resolutions.

Widgets and forms created with Qt Designer integrate seamlessly with programmed code, using Qt’s signals and slots mechanism, so that you can easily assign behavior to graphical elements. All properties set in Qt Designer can be changed dynamically within the code. Furthermore, features like widget promotion and custom plugins allow you to use your own components with Qt Designer.

Qt Designer

图1 Qt Designer的雪肤花貌(集成模式)

Qt Designer - standalone mode

图2 Qt Designer不止一面(独立模式)

值得注意的是,Qt Designer有两种模式,独立版和集成版,二者外表和主要功能基本一致。单独的Qt Designer设计工具,可以在Qt安装目录的bin目录下找到,其提供更丰富的设计功能体验(如,预览功能;模拟不同平台下的外观等)。

孔雀不小,五脏俱全

下面介绍一下集成版的Qt Designer功能区(图一中红色圆圈标注):

  1. 窗口部件盒:提供组件(拖放组件至表单区)
  2. 表单设计区:设计UI表单
  3. 对象查看器:查看表单中的组件对象
  4. 属性编辑器:编辑组件的属性
  5. 动作编辑器 & 信号-槽编辑器:编辑动作,编辑信号-槽

如果你对上面的一些概念陌生,不用心急,后面的教程会带你熟悉。

历史遗留问题

是时候小试牛刀一波了!还记得上个教程用代码裸写的界面吗?下面且看如何使用Qt Designer,“快准狠”地设计出相同的布局。

同样,创建一个Qt Widgets Application,在向导对话框中类信息页面,基类选为QWidget,选中创建界面复选框(使用Qt的界面文件.ui),最后完成。如下:

WidgetWithUi

图3 创建使用界面文件的QWidget工程

这样,在项目中即可找到一个.ui文件,如下:

QtUiFile

图4 Qt界面文件一览

双击打开该界面文件,进入设计模式。此时,可以按住鼠标左键从“1-窗口部件盒”中向“2-表单设计区”中拖拽组件,调整组件尺寸和位置,如下:

DragAndDrop

图5 从窗口部件盒拖拽组件至表单设计区

尝试使用拖动、双击、右键操作表单设计区上的组件,探索如何改变这些组件的外观和属性。

QD-TextBrowser

图6 双击QTextBrowser组件改变初始值

QD-ComboBox

图7 双击QComboBox添加列表项

QD-ToolButton

图8 在属性编辑器中为QToolButton设置属性(添加图标等)

革命尚未成功

哦,我的上帝啊!真是难以置信!我们没写一行代码,就设计出了想要的用户界面。到底放生什么了?兴奋之余,我们遗憾地发现:这个组件并不是自适应的!当我们改变界面的大小,会发现界面上的组件并没有动态地适配布局。这不是我们想要的结果。

UnadaptiveUI

图9 不能自适应布局的UI

对比一下上篇博客中手写的UI代码,我们不难发现:使用Qt Designer设计界面时,我们没有使用布局(layout)组件!这是导致我们设计的UI不能自适应的罪归祸首。细心的读者也许会发现,在“3-对象查看器”中,AdaptiveWidget前面有个红色图标。此红色图标表明:顶级(top level)组件没有添加布局!

BrokenLayoutIcon

图10 顶级组件中“坏掉的红色布局图标”

自适应的秘诀

这个问题直接拉低我们UI的逼格,所以亟需消灭。解决此问题的关键在于:给组件添加合适的布局!按照上篇博客的思路,我们将于字体设置有关的所有组件至于一个水平布局(QHBoxLayout)中,将水平空白占位符和“发送”按钮同样至于一个水平布局中,然后将自上而下的四组组件放置于一个栅格布局(QGridLayout)中。

FontHLayout

图11 将字体设置相关组件置于水平布局中

HLayoutRst

图12 水平布局结果(红色细线方框)

GridLayout

图13 自上而下四区域栅格化布局

GridLayoutRst

图14 栅格化布局结果

HLayoutOfTopLevel

图15 添加顶级组件的水平布局(红色圆形图标存在!)

 

PropertySet

图16 顶级组件布局结果(红色圆圈图标消失!)

选中组件和设置布局的技巧:

  • 可以在“2-表单设计区”或者“3-对象查看器”中选择相关组件;
  • 按住Ctrl(或Cmd)键多选;
  • 布局组件在“3-对象查看器”中选择;
  • 右键设置布局或打破布局;
  • 设置顶级布局时,在“2-表单设计区”空白部分右键(或者直接在“3-对象查看器”的顶级对象上右键)。

众里寻他千百度

哇呜,太棒了!

AdaptiveUI

图17 Qt Designer中设计自适应UI

有心人会提问:“最后为顶级组件添加水平布局后,为何在对象查看器中看不到gridLayout上面有horizantalLayout之类的对象呢?”官方的解释是下面一段英文:

Main layouts cannot be seen on the form. To check if you have a main layout installed, try resizing your form; your widgets should resize accordingly. Alternatively, you can take a look at Qt Designer’s Object Inspector. If your top level widget does not have a layout, you will see the broken layout icon next to it。

其实,将Qt Creator由设计模式切换到编辑模式,可以查看.ui文件的源代码(只读)。本实例的部分代码如下:

从中可以看到 <layout class="QHBoxLayout" name="horizontalLayout_3"> 即为顶层组件AdaptiveWidget的主布局(MainLayout)。

最后,附上工程默认生成的.h和.cpp文件中代码。

.h头文件如下:

.cpp源文件如下:

 

喜欢 (4)
[187****3312]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(6)个小伙伴在吐槽
  1. Wow,不愧是技术中的文青,文青里搞技术的,此博客一出,令人欲罢不能。
    wlbanshen2016-07-11 15:25 回复
    • 鹏总过奖,着实让我辈惶恐~
      Darren Ding2016-07-11 20:57 回复
  2. I found your weblog web site on google and examine a few of your early posts. Continue to maintain up the superb operate. I just further up your RSS feed to my MSN Information Reader. Looking for ahead to reading more from you later on! galileosn
    galileosn2017-01-12 16:54 回复
  3. Je trouve que vous vous trompez. http://mazhabin.takbb.com/showthread.php?tid=38738 http://forum.crystalfinger.com.au/index.php?action=vthread&forum=1&topic=15&page=43#msg57813 http://forum.mukhtarat.com/viewtopic.php?f=3&t=204461
    mambuff2017-01-16 07:03 回复
  4. Desidero incoraggiarvi a visitare il sito, dove ci sono molti articoli sul tema che vi interessa. http://198.100.31.186/forum/viewtopic.php?f=58&t=111387 http://www.ekap.org/teachers/viewtopic.php?pid=105788#p105788 http://2bike.net/thread-196388-1-1.html
    mambuff2017-01-17 09:05 回复
  5. Nice post. I learn one thing tougher on completely different blogs everyday. It can at all times be stimulating to read content material from different writers and follow somewhat something from their store. I’d want to make use of some with the content material on my weblog whether or not you don’t mind. Natually I’ll provide you with a hyperlink on your internet blog. Thanks for sharing. http://www.krimetime.com/writersBench/viewtopic.php?f=13&t=43409 http://www.seamansite.org/forum/index.php?topic=286338.new#new online multiplayer fps free online first person shooting games
    mambuff2017-02-26 03:44 回复