找回密码
 立即注册
收起左侧

Qt学习之路第11篇 布局管理器

23
回复
40344
查看
[复制链接]
累计签到:3 天
连续签到:1 天
来源: 2013-9-9 11:09:26 显示全部楼层 |阅读模式
版权声明

该文章原创于Qter开源社区(www.qter.org),作者devbean,博客www.devbean.net,转载请注明出处!


所谓 GUI 界面,归根结底,就是一堆组件的叠加。我们创建一个窗口,把按钮放上面,把图标放上面,这样就成了一个界面。在放置时,组件的位置尤其重要。我们必须要指定组件放在哪里,以便窗口能够按照我们需要的方式进行渲染。这就涉及到组件定位的机制。Qt 提供了两种组件定位机制:绝对定位和布局定位。


顾名思义,绝对定位就是一种最原始的定位方法:给出这个组件的坐标和长宽值。这样,Qt 就知道该把组件放在哪里以及如何设置组件的大小。但是这样做带来的一个问题是,如果用户改变了窗口大小,比如点击最大化按钮或者使用鼠标拖动窗口边缘,采用绝对定位的组件是不会有任何响应的。这也很自然,因为你并没有告诉 Qt,在窗口变化时,组件是否要更新自己以及如何更新。如果你需要让组件自动更新——这是很常见的需求,比如在最大化时,Word 总会把稿纸区放大,把工具栏拉长——就要自己编写相应的函数来响应这些变化。或者,还有更简单的方法:禁止用户改变窗口大小。但这总不是长远之计。


针对这种变化的需求,Qt 提供了另外的一种机制——布局——来解决这个问题。你只要把组件放入某一种布局,布局由专门的布局管理器进行管理。当需要调整大小或者位置的时候,Qt 使用对应的布局管理器进行调整。下面来看一个例子:

  1. // !!! Qt 5

  2. int main(int argc, char *argv[])
  3. {
  4.     QApplication app(argc, argv);

  5.     QWidget window;
  6.     window.setWindowTitle("Enter your age");

  7.     QSpinBox *spinBox = new QSpinBox(&window);
  8.     QSlider *slider = new QSlider(Qt::Horizontal, &window);
  9.     spinBox->setRange(0, 130);
  10.     slider->setRange(0, 130);

  11.     QObject::connect(slider, &QSlider::valueChanged, spinBox, &QSpinBox::setValue);
  12.     void (QSpinBox:: *spinBoxSignal)(int) = &QSpinBox::valueChanged;
  13.     QObject::connect(spinBox, spinBoxSignal, slider, &QSlider::setValue);
  14.     spinBox->setValue(35);

  15.     QHBoxLayout *layout = new QHBoxLayout;
  16.     layout->addWidget(spinBox);
  17.     layout->addWidget(slider);
  18.     window.setLayout(layout);

  19.     window.show();

  20.     return app.exec();
  21. }
复制代码

这段例子还是有些东西值得解释的。我们可以先来看看运行结果:





当我们拖动窗口时,可以看到组件自动有了变化:





我们在这段代码中引入了两个新的组件:QSpinBox 和 QSlider。QSpinBox 就是只能输入数字的输入框,并且带有上下箭头的步进按钮。QSlider 则是带有滑块的滑竿。我们可以从上面的截图中清楚地辨别出这两个组件。当我们创建了这两个组件的实例之后,我们使用 setRange() 函数设置其范围。既然我们的窗口标题是“Enter your age(输入你的年龄)”,那么把 range(范围)设置为 0 到 130 应该足够了。



有趣的部分在下面的 connect() 函数。我们已经清楚 connect() 函数的使用,因此我们写出

  1. QObject::connect(slider, &QSlider::valueChanged, spinBox, &QSpinBox::setValue);
复制代码

将 slider 的 valueChanged() 信号同 spinBox 的 setValue() 函数相连。这是我们熟悉的。但是,当我们直接写

  1. QObject::connect(spinBox, &QSpinBox::valueChanged, slider, &QSlider::setValue);
复制代码

的时候,编译器却会报错:

  1. no matching function for call to 'QObject::connect(QSpinBox*&, <unresolved overloaded function type>, QSlider*&, void (QAbstractSlider::*)(int))'
复制代码

这是怎么回事呢?从出错信息可以看出,编译器认为 QSpinBox::valueChanged 是一个 overloaded 的函数。我们看一下 QSpinBox 的文档发现,QSpinBox 的确有两个信号:

  • void valueChanged(int)
  • void valueChanged(const QString &)

当我们使用 &QSpinBox::valueChanged 取函数指针时,编译器不知道应该取哪一个函数(记住前面我们介绍过的,经过 moc 预处理后,signal 也是一个普通的函数。)的地址,因此报错。解决的方法很简单,编译器不是不能确定哪一个函数吗?那么我们就显式指定一个函数。方法就是,我们创建一个函数指针,这个函数指针参数指定为 int:

  1. void (QSpinBox:: *spinBoxSignal)(int) = &QSpinBox::valueChanged;
复制代码

然后我们将这个函数指针作为 signal,与 QSlider 的函数连接:

  1. QObject::connect(spinBox, spinBoxSignal, slider, &QSlider::setValue);
复制代码

这样便避免了编译错误。


仔细观察这两个 connect() 的作用,它们实际完成了一个双向的数据绑定。当然,对于 Qt 自己的信号函数,我们可以比较放心地使用。但是,如果是我们自己的信号,应当注意避免发生无限循环!


下面的代码,我们创建了一个 QHBoxLayout 对象。显然,这就是一个布局管理器。然后将这两个组件都添加到这个布局管理器,并且把该布局管理器设置为窗口的布局管理器。这些代码看起来都是顺理成章的,应该很容易明白。并且,布局管理器很聪明地做出了正确的行为:保持 QSpinBox 宽度不变,自动拉伸 QSlider 的宽度。


Qt 提供了几种布局管理器供我们选择:

  • QHBoxLayout:按照水平方向从左到右布局;
  • QVBoxLayout:按照竖直方向从上到下布局;
  • QGridLayout:在一个网格中进行布局,类似于 HTML 的 table;
  • QFormLayout:按照表格布局,每一行前面是一段文本,文本后面跟随一个组件(通常是输入框),类似 HTML 的 form;
  • QStackedLayout:层叠的布局,允许我们将几个组件按照 Z 轴方向堆叠,可以形成向导那种一页一页的效果。

当然,我们也可以使用 Qt 4 来编译上面的代码,不过,正如大家应该想到的一样,我们必须把 connect() 函数修改一下:

  1. // !!! Qt 4

  2. int main(int argc, char *argv[])
  3. {
  4.     QApplication app(argc, argv);

  5.     QWidget window;
  6.     window.setWindowTitle("Enter your age");

  7.     QSpinBox *spinBox = new QSpinBox(&window);
  8.     QSlider *slider = new QSlider(Qt::Horizontal, &window);
  9.     spinBox->setRange(0, 130);
  10.     slider->setRange(0, 130);

  11.     QObject::connect(slider,  SIGNAL(valueChanged(int)),
  12.                      spinBox, SLOT(setValue(int)));
  13.     QObject::connect(spinBox, SIGNAL(valueChanged(int)),
  14.                      slider,  SLOT(setValue(int)));
  15.     spinBox->setValue(35);

  16.     QHBoxLayout *layout = new QHBoxLayout;
  17.     layout->addWidget(spinBox);
  18.     layout->addWidget(slider);
  19.     window.setLayout(layout);

  20.     window.show();

  21.     return app.exec();
  22. }
复制代码

这里我们强调一下,上面的代码在 Qt 5 中同样可以编译通过。不过,我们减少了使用函数指针指定信号的步骤。也就是说,在 Qt 5 中,如果你想使用 overloaded 的 signal,有两种方式可供选择:

  • 使用 Qt 4 的 SIGNAL 和 SLOT 宏,因为这两个宏已经指定了参数信息,所以不存在这个问题;
  • 使用函数指针显式指定使用哪一个信号。

有时候,使用 Qt 4 的语法更简洁。但是需要注意的是,Qt 4 的语法是没有编译期错误检查的。这也是同 Qt 5 的信号槽新语法不同之处之一。







本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
参与人数 4人气 +8 收起 理由
21199016 + 2 必须支持!
Lepus + 2 对我帮助很大!
leon2017 + 2 对我帮助很大!
七色如逸 + 2

查看全部评分总评分 : 人气 +8

回复

使用道具 举报

累计签到:1 天
连续签到:1 天
2014-11-10 16:16:26 显示全部楼层
需要包含这些:
  1. #include "mainwindow.h"
  2. #include <QApplication>
  3. #include <QSpinBox>
  4. #include <QSlider>
  5. #include <QHBoxLayout>
复制代码
回复 支持 4 反对 0

使用道具 举报

尚未签到

2016-3-1 15:42:33 显示全部楼层
为啥图片都看不到?
回复 支持 2 反对 0

使用道具 举报

累计签到:12 天
连续签到:1 天
2017-12-5 22:21:40 显示全部楼层
  1. 如果出现布局重叠的问题,不要使用 QMainWindow,这个基类可能回导致布局失效。
  2. 可以试试基类改成: QDialog; 头文件:#include <QDialog>
复制代码

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 支持 2 反对 0

使用道具 举报

尚未签到

2013-9-29 11:00:47 显示全部楼层
用的Qt5.1   运行后不能实现自动缩放,slider大小固定,怎么回事?
回复 支持 反对

使用道具 举报

累计签到:17 天
连续签到:1 天
2014-8-22 15:21:00 显示全部楼层
获取重载函数的具体函数类型,还有别的方法吗?
回复 支持 反对

使用道具 举报

累计签到:1 天
连续签到:1 天
2014-9-4 20:26:32 显示全部楼层
这个包含哪些头文件?我是新手,不要介意
回复 支持 反对

使用道具 举报

累计签到:1 天
连续签到:1 天
2014-11-10 16:18:42 显示全部楼层
有个问题就是感觉QSpinBox有点怪,当我点击向上的步进时是数字增大的,点向下的步进时是数字减小的,但是那个向上的三角明显比向下的三角小。。。
回复 支持 反对

使用道具 举报

累计签到:5 天
连续签到:1 天
2015-6-15 20:34:12 显示全部楼层
关于重载signal的部分讲得很好,受教了
回复 支持 反对

使用道具 举报

累计签到:467 天
连续签到:1 天
2015-12-29 14:28:11 显示全部楼层
受教了,大神,学习中
回复 支持 反对

使用道具 举报

累计签到:20 天
连续签到:1 天
2016-5-18 00:00:16 显示全部楼层
看来Qt4和Qt5之间的差别还是比较大的
回复 支持 反对

使用道具 举报

累计签到:4 天
连续签到:1 天
2016-8-27 14:31:04 显示全部楼层
一个错误 在堆上构造QHBoxLayout对象时即没有指定父类,所以需要在main函数后认为delete这个对象
回复 支持 反对

使用道具 举报

累计签到:1 天
连续签到:1 天
2017-7-6 09:36:09 显示全部楼层

不用包含 mainwindow.h也行,这段代码没有使用新建的窗体
回复 支持 反对

使用道具 举报

累计签到:10 天
连续签到:1 天
2017-7-16 15:45:45 显示全部楼层

我也是想了一会儿才知道头文件没加载
回复 支持 反对

使用道具 举报

累计签到:1 天
连续签到:1 天
2017-7-24 22:49:19 显示全部楼层

还差一个
  1. #include <Qt>
复制代码


回复 支持 反对

使用道具 举报

累计签到:1 天
连续签到:1 天
2017-7-24 22:50:32 显示全部楼层
不是QT,而是Qt.

  1.     QSlider *slider = new QSlider(Qt::Horizontal,&window);
复制代码
回复 支持 反对

使用道具 举报

累计签到:153 天
连续签到:5 天
2017-8-1 14:47:41 显示全部楼层
学习中。。。感谢楼主分享经验
回复 支持 反对

使用道具 举报

累计签到:10 天
连续签到:1 天
2017-8-18 23:06:02 显示全部楼层

非常感谢!!!!!!!!!!!!!!
回复 支持 反对

使用道具 举报

累计签到:10 天
连续签到:1 天
2017-8-18 23:34:59 显示全部楼层
m__dd 发表于 2013-9-29 11:00
用的Qt5.1   运行后不能实现自动缩放,slider大小固定,怎么回事?

我也想问。。。请问您现在知道是什么原因了吗???
回复 支持 反对

使用道具 举报

累计签到:2 天
连续签到:1 天
2018-3-7 12:27:34 显示全部楼层
这个需要设置centralwidget吗,为什么提示已经有layout了啊,而且是重叠显示
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

公告
可以关注我们的微信公众号yafeilinux_friends获取最新动态,或者加入QQ会员群进行交流:190741849、186601429(已满) 我知道了