Qt之手动布局

原创 2016年05月30日 11:05:35

简述

手动布局,可以实现和水平布局、垂直布局、网格布局等相同的效果,也可实现属于自己的自定义布局,当窗体缩放时,控件可以随之变化。

其对于坐标系的建立有严格要求,纯代码思维,使用复杂,不易维护,所以一般不建议使用。

下面我们以简单的例子来讲解如何使用。

事件

Qt之布局管理器一节中,我们介绍了对于手动布局的实现思路。

通过QWidget::resizeEvent()来计算所需要分配的大小,并且给每个子控件调用setGeometry()。

垂直布局

简略图

我们先简单看一个简略图,是一个一个垂直布局的界面,包含各个部位的组成以及大小限制。

这里写图片描述

其中Left Margin、Top Margin、Right Margin、Bottom Margin分别指各个控件距离窗体的左、上、右、下外边距,Spacing指控件之间的间距。

效果

这里写图片描述

源码

void MainWindow::resizeEvent(QResizeEvent *event)
{
    QWidget::resizeEvent(event);

    int nSpacing = 10;
    int nLeft = 10;
    int nTop = 10;
    int nRight = 10;
    int nBottom = 10;

    // 标签位置、大小
    m_pLabel->setGeometry(nLeft, nTop, width() - nLeft - nRight, 20);

    // 按钮大小
    m_pButton->setFixedSize(75, 25);

    // 设置按钮位置
    m_pButton->move(width() - m_pButton->width() - nRight, height() - nBottom - m_pButton->height());

    // 中央窗体位置、大小
    m_pCentralWidget->setGeometry(nLeft, nTop + nSpacing + m_pLabel->height(),
                                  width() - nLeft - nRight, height() - nTop - 2 *nSpacing - m_pLabel->height() - m_pButton->height() - nBottom);
}

标签和中央窗体的宽度均为:width() - nLeft - nRight,即:窗体宽度 - 左边距 - 右边距。

标签的坐标为QPoint(nLeft, nTop),即:x为左边距,y为上边距。

中央窗体的坐标为:QPoint(nLeft, nTop + nSpacing + m_pLabel->height()),即:x:左边距,y:上边距 + 间距 + 标签高度。

中央窗体的高度为:height() - nTop - 2 nSpacing - m_pLabel->height() - m_pButton->height() - nBottom。即:窗体高度 - 上边距 - 标签高度 - 按钮高度 - 下边距 - 2 间距。

按钮大小为:QSize(75, 25),即:width:75,height:25。

按钮位置:QPoint(width() - m_pButton->width() - nRight, height() - nBottom - m_pButton->height())。即:x:窗体宽度 - 按钮宽度 - 右边距,y:窗体高度 - 按钮高度 - 下边距。

水平布局

实现思路不再过多讲解,参考垂直布局。

效果

这里写图片描述

这里写图片描述

源码

void MainWindow::resizeEvent(QResizeEvent *event)
{
    QWidget::resizeEvent(event);

    int nSpacing = 10;
    int nLeft = 10;
    int nTop = 10;
    int nRight = 10;
    int nBottom = 10;

    m_pLeftButton->setFixedSize(75, 25);
    m_pCentralButton->setFixedSize(75, 25);
    m_pRightButton->setFixedSize(75, 25);

    // 居左
    //m_pLeftButton->move(nLeft, nTop);
    //m_pCentralButton->move(nLeft + m_pLeftButton->width() + nSpacing, nTop);
    //m_pRightButton->move(nLeft + m_pLeftButton->width() + m_pCentralButton->width() + 2 * nSpacing, nTop);

    // 居右
    m_pRightButton->move(width() - m_pRightButton->width() - nRight, nTop);
    m_pCentralButton->move(width() - m_pCentralButton->width() - m_pRightButton->width() - nSpacing - nRight, nTop);
    m_pLeftButton->move(width() - m_pLeftButton->width() - m_pCentralButton->width() - m_pRightButton->width() - 2 * nSpacing - nRight, nTop);
}

总结

好了,关于网格布局或其他复杂布局就不再一一介绍了,主要计算好各个控件的相对坐标即可。

有人肯定会有疑惑,为什么不使用setGeometry(10, 10, 100, 75),而必须通过resizeEvent()来计算坐标呢?

主要区别:

  • setGeometry(10, 10, 100, 75)采用绝对坐标和位置,适用于窗体大小固定的情况。一旦大小发生变化,则无计可施。

  • resizeEvent()计算坐标属于相对位置,无论窗体如何变化,都可以适应其在窗体中的布局。

版权声明:进步始于交流,收获源于分享!纯正开源之美,有趣、好玩、靠谱。。。作者:一去丶二三里 博客地址:http://blog.csdn.net/liang19890820

Qt 窗体布局

布局相关对象及简介 窗体上的所有的控件必须有一个合适的尺寸和位置。Qt提供了一些类负责排列窗体上的控件,主要有:QHBoxLayout,QVBoxLayout,QGridLayout,QStackL...
  • Study_more
  • Study_more
  • 2012年02月28日 23:09
  • 11737

Qt之自定义布局管理器(QBorderLayout)

简述QBorderLayout,顾名思义-边框布局,实现了排列子控件包围中央区域的布局。具体实现要求不再赘述,请参考前几节内容。简述 实现 效果 源码 使用实现QBorderLayout主要采用QLa...
  • u011012932
  • u011012932
  • 2016年05月27日 19:09
  • 7887

Qt之自定义布局管理器(QCardLayout)

简述手动布局另一种方法是通过继承QLayout类编写自己的布局管理器。下面我们详细来举一个例子。QCardLayout类是由同名的Java布局管理器启发而来。在彼此的顶部勾画出项目(小部件或嵌套布局)...
  • u011012932
  • u011012932
  • 2016年05月27日 18:10
  • 7560

QListWidget自定义布局例程

  • 2013年10月14日 10:21
  • 16.36MB
  • 下载

Qt之自定义布局管理器(QFlowLayout)

简述QFlowLayout,顾名思义-流布局,实现了处理不同窗口大小的布局。根据应用窗口的宽度来进行控件放置的变化。具体实现要求不再赘述,请参考前两节内容。简述 实现 效果 源码实现QFlowLayo...
  • u011012932
  • u011012932
  • 2016年05月27日 18:49
  • 7335

详解 QT 布局管理界面 图文并茂

T 布局管理界面 图文并茂是本文介绍的内容,先来看内容。今天来实现一个温度转换器的界面。如下图: 水平布局管理器可以把它所管理的部件以水平的顺序依次排开,例如上图中中间的“Centigrade”...
  • lhchen922
  • lhchen922
  • 2014年08月02日 21:30
  • 15123

QT(7)自定义Layout

我们进一步学习构建稍微复杂一点的布局。通过对抽象类QLayout的继承来进行自己的布局。在这个例子中,我们将重构QLayout类为BorderLayout,QLayout是一个用于布局管理的基础抽象类...
  • flowingflying
  • flowingflying
  • 2011年01月19日 17:08
  • 5787

Qt之自定义界面(添加自定义标题栏)

简述通过上节内容,我们实现了自定义窗体的移动,但是我们缺少一个标题栏来显示窗体的图标、标题,以及控制窗体最小化、最大化、关闭的按钮。自定义标题栏后,所有的控件我们都可以定制,比如:在标题栏中添加换肤、...
  • u011012932
  • u011012932
  • 2016年01月21日 14:58
  • 21078

初步学习Qt布局

布局管理 以下是Qt手册中的《布局管理》的译文 在一个Widget中,Qt布局管理系统提供了一个简单而有效的方式来自动组织子widget,以保证他们能够很好地利用可用空间。 介绍 Qt包含一个...
  • happyrabbit456
  • happyrabbit456
  • 2016年09月29日 14:59
  • 787

qt界面手动布局测试

**************** #include "mainwindow.h" #include "ui_mainwindow.h" #include #include ...
  • hlday6
  • hlday6
  • 2014年08月27日 16:00
  • 595
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Qt之手动布局
举报原因:
原因补充:

(最多只允许输入30个字)