3.1 标准布局管理器(一)

简介: 3.1 标准布局管理器(一)

今天我们开始第三章布局管理的学习

在前面的例子中,当我们改变窗口的大小时,发现窗口上的控件并不会根据窗口的大小变化而改变自己的大小及位置,而我们在界面设计中会经常希望,当父窗口改变大小时,其子窗口也会跟着变化,为此Qt引入了布局管理器来实现这样的功能。

Qt为我们引入了很多标准布局管理器,例如QHBoxLayout,QVBoxLayout,QGridLayout,QFormLayout等等,一般情况下,这些管理器已经够用了,如果还需要实现特殊的管理器,你还可以继承QLayout自定义管理器。

本节我们先来看看Qt的标准布局管理器

3.1.1水平、垂直、网格布局管理器

水平和垂直管理器的区别只有方向,其它都一样,所以这里就只拿水平管理器来举例说明了。

H代表horizontal表示水平的,V代表vertical表示垂直的,所以水平管理器是QHBoxLayout,垂直管理器是QVBoxLayout。

它们都继承于QBoxLayout,QBoxLayout继承于QLayout,QLayout继承于QObject和QLayoutItem。

网格管理器从名字上也很好理解,下面我们直接上代码

3.1.2 示例

新建一个GUI项目StdLayoutWidget,类名为StdLayoutWidget,基类选择QWidget

stdlayoutwidget.h

#ifndef STDLAYOUTWIDGET_H
#define STDLAYOUTWIDGET_H
#include <QWidget>
namespace Ui {
class StdLayoutWidget;
}
class QTabWidget;
class StdLayoutWidget : public QWidget
{
    Q_OBJECT
public:
    explicit StdLayoutWidget(QWidget *parent = 0);
    ~StdLayoutWidget();
private:
    void initHBoxLayout();
    void initGridLayout();
private:
    Ui::StdLayoutWidget *ui;
    QTabWidget* tabWidget;
};
#endif // STDLAYOUTWIDGET_H

stdlayoutwidget.cpp

#include <QLabel>
#include <QPushButton>
#include <QHBoxLayout>
#include <QTabWidget>
#include "stdlayoutwidget.h"
#include "ui_stdlayoutwidget.h"
StdLayoutWidget::StdLayoutWidget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::StdLayoutWidget)
{
    ui->setupUi(this);
    //这里传入this,表示hLayout设置在主窗口上,如果这里不传this,则需要调用setLayout()接口
    QHBoxLayout* hLayout = new QHBoxLayout(this);
    tabWidget = new QTabWidget;
    hLayout->addWidget(tabWidget);
    initHBoxLayout();
    initGridLayout();
}
StdLayoutWidget::~StdLayoutWidget()
{
    delete ui;
}
void StdLayoutWidget::initHBoxLayout()
{
    QWidget* hWidget = new QWidget;
    QHBoxLayout *layout = new QHBoxLayout;
    hWidget->setLayout(layout);
    QStringList textList;
    textList << tr("一") << tr("二") << tr("三") << tr("四") << tr("五");
    for (int i = 0; i < textList.size(); ++i)
    {
        QString txt = textList.at(i);
        QPushButton *button = new QPushButton(txt);
        layout->addWidget(button);//将按钮加入到布局管理器中
        layout->addSpacing(i*10);//设置按钮之间的间距
    }
    //设置边距为20像素
    layout->setMargin(20);
    QPushButton *firstButton = hWidget->findChild<QPushButton *>();
    //将按钮“一”放到第三个位置上
    layout->insertWidget(3, firstButton);
    //将按钮“一”设置在上方
    layout->setAlignment(firstButton, Qt::AlignTop);
    //添加tab页
    tabWidget->addTab(hWidget, "QHBoxLayout");
}
void StdLayoutWidget::initGridLayout()
{
    QWidget* gridWidget = new QWidget;
    QGridLayout *layout = new QGridLayout;
    gridWidget->setLayout(layout);
    QLabel *label1 = new QLabel("一");
    QLabel *label2 = new QLabel("二");
    QLabel *label3 = new QLabel("三");
    QLabel *label4 = new QLabel("四");
    QLabel *label5 = new QLabel("五");
    layout->addWidget(label1, 0/*0行*/, 0/*0列*/, 2/*占2行*/, 3/*占3列*/);
    layout->addWidget(label2, 2, 0, 1, 1);
    layout->addWidget(label3, 2, 1, 1, 1);
    layout->addWidget(label4, 2, 2, 1, 1);
    layout->addWidget(label5, 3, 1, 1, 2);
    //为所有标签设置背景颜色
    QList<QLabel *> allLabels = gridWidget->findChildren<QLabel *>();
    foreach (QLabel* label, allLabels)
    {
        QColor clr(qrand()%255, qrand()%255, qrand()%255);
        //为标签设置背景,关于样式表以后会讲到
        label->setStyleSheet(QString("QLabel{background-color:%1}").arg(clr.name()));
    }
    tabWidget->addTab(gridWidget, "QGridBoxLayout");
}

3.1.3 在ui中使用布局管理器

如果我们在代码中直接使用布局管理器,当面对复杂的窗口时就会很混乱,但我们可以使用ui设计器来编辑我们的布局。

下图是ui界面中的布局管理按钮

01ebd755782e4c909dad0843d3544acf.jpeg

从左至右,依次为“水平布局”,“垂直布局”,“水平分裂器”,“垂直分裂器”,“表格布局”,“网格布局”,“清除布局”。

选中所有要加入到布局的控件,然后点击以上按钮,即可加入布局。

布局管理器还可以从左侧的控件列表中选择,并拖入到编辑窗口中。

在编辑窗口中还可以右键选择布局。


关于分裂器,表格布局我们后面再讲,今天的分享就到这里了,我们下次见。

想要第一时间看到小豆君的更新,请关注微信公众号:小豆君,只要关注,便可加入小豆君为大家创建的C++\Qt交流群,方便讨论学习。

相关文章
|
3月前
|
编解码 算法 开发者
Flutter的布局系统:深入探索布局Widget与布局原则
【4月更文挑战第26天】Flutter布局系统详解,涵盖布局Widget(Row/Column、Stack、GridView/ListView、CustomSingleChildLayout)和布局原则(弹性布局、约束优先、流式布局、简洁明了)。文章旨在帮助开发者理解并运用Flutter的布局系统,创建适应性强、用户体验佳的界面。通过选择合适的布局Widget和遵循原则,可实现复杂且高效的UI设计。
|
3月前
|
数据可视化 Android开发
Android布局——约束布局
Android布局——约束布局
|
3月前
[Qt5&布局] 控件自动填满所在布局框架
[Qt5&布局] 控件自动填满所在布局框架
69 0
[Qt5&布局] 控件自动填满所在布局框架
|
3月前
|
XML Java Android开发
Android Studio中视图基础之设置视图的宽高、间距、对齐方式的讲解与实战(附源码 超详细必看)
Android Studio中视图基础之设置视图的宽高、间距、对齐方式的讲解与实战(附源码 超详细必看)
236 0
|
10月前
|
XML Android开发 数据格式
一个Adapter+recycleview实现多种布局,区分布局中
最近因为需要所以学习了一下recycleview,使用Adapter修饰器修饰,使用一个Adapter+recycleview实现多种布局,而不是之前的三个Adapter在同一个recycleview中实现三个布局。点击区分布局中的gridview的图片和姓名。
40 0
|
编解码 前端开发 Android开发
移动布局基础(流式布局)
移动布局基础(流式布局)
119 0
|
Android开发 容器
Android 实现控件对称布局(约束布局和线性布局)
画界面时会遇到很多界面上的布局,虽然很简单,但是每次做起来不熟练,总结一下一些日常的
Qt5——布局管理
Qt5——布局管理
312 0
Qt5——布局管理
|
C++ 索引 容器
3.1 标准布局管理器(三)
3.1 标准布局管理器(三)
3.1 标准布局管理器(三)
|
Linux C++ iOS开发
3.1 标准布局管理器(二)
3.1 标准布局管理器(二)
3.1 标准布局管理器(二)