11.QT-布局管理器(Box,Grid,Form,Stacked)

布局管理器简介

QT中提供了对界面组件进行布局管理的类，用于对界面组件进行管理，
能够自动排列窗口中的界面组件
窗口大小变化后,便会自动更新界面组件的大小。
布局管理器可以自定义,从而达到更加个性化界面布局的效果
布局管理器可以相互嵌套,完成所有常用的界面布局
QLayout是Qt中布局管理器的抽象基类,如下图所示:

QBoxLayout水平/垂直布局

QBoxLayout有两个子类：QHBoxLayout(水平)和QVBoxLayput(垂直)

比如垂直布局,表示将垂直方向分为一个个格子,如下图所示:

QVBoxLayput使用

int main(int argc, char *argv[])

{

    QApplication a(argc, argv);

    QWidget w;

    QVBoxLayout *layout=new QVBoxLayout;

    QPushButton btn1("test1",&w);

    QPushButton btn2("test2",&w);

    QPushButton btn3("test3",&w);

    btn1.setMaximumSize(,);

    btn1.setMinimumSize(,);

    btn2.setMaximumSize(,);

    btn2.setMinimumSize(,);

    btn3.setMaximumSize(,);

    btn3.setMinimumSize(,);

     layout->addWidget(&btn1);       //向布局管理器添加组件,实现自动布局

     layout->addWidget(&btn2);

     layout->addWidget(&btn3);

     w.setLayout(layout);           //为部件设置布局管理器

     layout->setSpacing();

     w.show();

     return a.exec();

}

QHBoxLayput使用

int main(int argc, char *argv[])

{

    QApplication a(argc, argv);

　　 QWidget w;

    QHBoxLayout *layout=new QHBoxLayout;

    QPushButton btn1("test1",&w);

    QPushButton btn2("test2",&w);

    QPushButton btn3("test3",&w);

    btn1.setMaximumSize(,);

    btn1.setMinimumSize(,);

    btn2.setMaximumSize(,);

    btn2.setMinimumSize(,);

    btn3.setMaximumSize(,);

    btn3.setMinimumSize(,);

     layout->addWidget(&btn1);       //向布局管理器添加组件,实现自动布局

     layout->addWidget(&btn2);

     layout->addWidget(&btn3);

     w.setLayout(layout);           //为部件设置布局管理器

     layout->setSpacing();

     w.show();

     return a.exec();

}

QBoxLayput相互嵌套

之前,我们写了QHBoxLayout(水平)和QVBoxLayput(垂直),但是只是单方面自动布局.

接下来,我们来使用嵌套,来实现水平+垂直自动布局,如下图所示:

示例代码如下:

int main(int argc, char *argv[])

{

    QApplication a(argc, argv);

    QHBoxLayout *Hlayout1=new QHBoxLayout;

    QHBoxLayout *Hlayout2=new QHBoxLayout;

    QVBoxLayout *Vlayout=new QVBoxLayout;

    QWidget w;

    QPushButton btn1("test1",&w);

    QPushButton btn2("test2",&w);

    QPushButton btn3("test3",&w);

    QPushButton btn4("test4",&w);

    btn1.setMaximumSize(,);

    btn1.setMinimumSize(,);

    btn2.setMaximumSize(,);

    btn2.setMinimumSize(,);

    btn3.setMaximumSize(,);

    btn3.setMinimumSize(,);

    btn4.setMaximumSize(,);

    btn4.setMinimumSize(,);

    Hlayout1->addWidget(&btn1);       //水平布局: btn1  btn2

    Hlayout1->addWidget(&btn2);

    Hlayout1->setSpacing();

    Hlayout2->addWidget(&btn3);      //水平布局: btn3  btn4

    Hlayout2->addWidget(&btn4);

    Hlayout2->setSpacing();

    Vlayout->addLayout(Hlayout1);     //垂直布局: Hlayout1 Hlayout2

    Vlayout->addLayout(Hlayout2);

    Vlayout->setSpacing();

    w.setLayout(Vlayout);           //设置布局管理器,由于Vlayout管理着Hlayout1 Hlayout2,所以只填写一个即可

    w.show();

    return a.exec();

}

布局管理器比例系数

默认情况下,组件之间以等比例的方式改变组件大小.

其实用户也可以自定义组件之间比例系数,当窗口放大时,便来更新比例系数.

常用函数:

QBoxLayout::setStretch ( int index, int stretch );     //设置具体组件的拉伸系数

// index:表示布局管理器里的第几个组件

// stretch :拉伸系数

bool  QBoxLayout::setStretchFactor ( QWidget * widget, int stretch );

                  //设置部件拉伸系数,如果存在*widget这个组件,则设置成功,返回true

bool QBoxLayout::setStretchFactor ( QLayout * layout, int stretch );

                  //设置布局拉伸系数, ,如果存在*layout这个组件,则设置成功,返回true

示例代码如下:

int main(int argc, char *argv[])

{

    QApplication a(argc, argv);

    QHBoxLayout *Hlayout1=new QHBoxLayout;

    QHBoxLayout *Hlayout2=new QHBoxLayout;

    QVBoxLayout *Vlayout=new QVBoxLayout;

    QWidget w;

    QPushButton btn1("test1",&w);

    QPushButton btn2("test2",&w);

    QPushButton btn3("test3",&w);

    QPushButton btn4("test4",&w);

    btn1.setMinimumSize(,);

    btn2.setMinimumSize(,);

    btn3.setMinimumSize(,);

    btn4.setMinimumSize(,);

    //设置大小策略,Expanding表示组件可扩展

    btn1.setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);

    btn2.setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);

    btn3.setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);

    btn4.setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);

    Hlayout1->addWidget(&btn1);       //水平布局: btn1  btn2

    Hlayout1->addWidget(&btn2);

    Hlayout1->setSpacing();

    Hlayout2->addWidget(&btn3);      //水平布局: btn3  btn4

    Hlayout2->addWidget(&btn4);

    Hlayout2->setSpacing();

    Vlayout->addLayout(Hlayout1);     //垂直布局: Hlayout1 Hlayout2

    Vlayout->addLayout(Hlayout2);

    Vlayout->setStretchFactor(Hlayout1,);

    Vlayout->setStretchFactor(Hlayout2,);

    Vlayout->setSpacing();

    w.setLayout(Vlayout);           //设置布局管理器,由于Vlayout管理着Hlayout1 Hlayout2,所以只填写一个即可

    w.show();

    return a.exec();

}

拉伸窗口后:

QGridLayout网格布局

以网格的方式管理界面组件,类似于:嵌套方式来使用QBoxLayout.

常用函数:

void  addWidget ( QWidget * widget, int row, int column, Qt::Alignment alignment =  );

                                   // row  column :表示将widget这个部件放在网格哪个位置

void  addWidget ( QWidget * widget, int fromRow, int fromColumn, int rowSpan, int columnSpan, Qt::Alignment alignment =  );

                                          // row  column :表示将widget这个部件放在网格哪个位置

                                          // rowSpan: widget这个部件占多少行

                                          // columnSpan: widget这个部件占多少列

void setColumnStretch(int column,int stretch);          //设置列拉伸系数

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　// column:设置布局管理器里的第几列,第1列为0

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

void setRowStretch(int row,int stretch);        　　     //设置行拉伸系数

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　// row:设置的第几行

示例代码:

int main(int argc, char *argv[])

{

    QApplication a(argc, argv);

    QGridLayout *layout=new QGridLayout;

    QWidget w;

    QPushButton btn1("test1",&w);

    QPushButton btn2("test2",&w);

    QPushButton btn3("test3",&w);

    QPushButton btn4("test4",&w);

    btn1.setMinimumSize(,);

    btn2.setMinimumSize(,);

    btn3.setMinimumSize(,);

    btn4.setMinimumSize(,);

    //设置大小策略,Expanding表示组件可扩展

    btn1.setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);

    btn2.setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);

    btn3.setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);

    btn4.setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);

    layout->addWidget(&btn1,,);

    layout->addWidget(&btn2,,);

    layout->addWidget(&btn3,,);

    layout->addWidget(&btn4,,);

    layout->setRowStretch(,);        //设置第0行,比例为1

    layout->setRowStretch(,);        //设置第1行,比例为2

    layout->setColumnStretch(,);     //设置第0列,比例为1

    layout->setColumnStretch(,);     //设置第1列,比例为2

    w.setLayout(layout);               //设置布局管理器

    w.show();

    return a.exec();

}

拉伸窗口后:

QGridLayout相互嵌套

QGridLayout也支持布局管理器嵌套,比如,如下图所示:

示例代码:

int main(int argc, char *argv[])

{

    QApplication a(argc, argv);

    QGridLayout *layout=new QGridLayout;

    QVBoxLayout *Vlyt=new QVBoxLayout;

    QWidget w;

    QPushButton btn1("test1",&w);

    QPushButton btn2("test2",&w);

    QPushButton btn3("test3",&w);

    QPushButton btn4("test4",&w);

    QPushButton btn5("test5",&w);

    btn1.setMinimumSize(,);

    btn2.setMinimumSize(,);

    btn3.setMinimumSize(,);

    btn4.setMinimumSize(,);        //btn4 btn5按钮需要缩小高度

    btn5.setMinimumSize(,);

    //设置大小策略,Expanding表示组件可扩展

    btn1.setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);

    btn2.setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);

    btn3.setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);

    btn4.setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);

    btn5.setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);

    Vlyt->addWidget(&btn4);

    Vlyt->addWidget(&btn5);

    layout->addWidget(&btn1,,);

    layout->addWidget(&btn2,,);

    layout->addWidget(&btn3,,);

    layout->addLayout(Vlyt,,);

    layout->setRowStretch(,);        //设置第0行,比例为1

    layout->setRowStretch(,);        //设置第1行,比例为2

    layout->setColumnStretch(,);     //设置第0列,比例为1

    layout->setColumnStretch(,);     //设置第1列,比例为2

    w.setLayout(layout);           　　 //设置布局管理器

    w.show();

    return a.exec();

}

拉伸窗口后:

QFormLayout表单布局

以表单的方式管理界面组件,专为标签和字段(组件)的形式创建的

表单布局也支持嵌套,可以管理子布局

常用函数:

addRow ( QWidget * label, QWidget * field );

addRow ( QWidget * label, QLayout * field );

addRow ( const QString & labelText, QWidget * field );

addRow ( const QString & labelText, QLayout * field );

void setLabelAlignment ( Qt::Alignment alignment );

　　　　　　　　　　  //设置标签对齐方式,比如标签左对齐

void  setRowWrapPolicy ( RowWrapPolicy policy );

　　　　　　　　　　//设置字段包装策略

　　　　　　　　　　//比如参数WrapLongRows:表示给标签足够长空间,如果一行满足不了标签和字段显示,则将字段放在下行显示

　　　　　　　　　　//参数QFormLayout::WrapAllRows: 示字段信息总在标签下面列出(占据整个行大小)

示例代码:

int main(int argc, char *argv[])

{

    QApplication a(argc, argv);

    QWidget w(,Qt::WindowCloseButtonHint);

    QLineEdit line1(&w);

    QLineEdit line2(&w);

    QLineEdit line3(&w);

    QFormLayout *layout= new QFormLayout;

    layout->addRow("姓名:",&line1);

    layout->addRow("邮箱:",&line2);

    layout->addRow("地址:",&line3);

    layout->setRowWrapPolicy(QFormLayout::WrapAllRows); //设置字段总在标签下面

    w.setLayout(layout);

    w.show();

    return a.exec();

}

效果:

QStackedLayout栈式布局

将所有组件进行垂直管理
并且每次只能有一个组件现在在屏幕上
只有最顶层的组件才会被最终显示
常用于图片播放,安装向导等

特点

组件大小一致且充满父组件的显示区
能够自由切换需要显示的组件
不能直接嵌套其它布局管理器,只能间接嵌套

常用函数:

int addWidget ( QWidget * widget );    　　　　　　　　　 　//顺序添加组件

int insertWidget ( int index, QWidget * widget );       //插入组件

void removeWidget ( QWidget * widget );                 //删除组件

QWidget * currentWidget() ;                            //返回当前组件

int   currentIndex();                                  //返回当前组件索引值

void setCurrentIndex ( int index );                    //切换当前组件

void setCurrentWidget ( QWidget * widget );            //更换当前显示的组件

代码试验,通过定时器自动切换QStackedLayout

Widget.h

#ifndef WIDGET_H

#define WIDGET_H

#include <QtGui>

#include <QWidget>

#include <QObject>

class Widget : public QWidget

{

    Q_OBJECT

    QTimer *timer;

    QStackedLayout  *Stack;

    QPushButton btn1;

    QPushButton btn2;

    QPushButton btn3;

    QPushButton btn4;

private slots:

     void  time_handler();

public:

    explicit Widget(QWidget *parent = );

};

#endif // WIDGET_H

Widget.cpp

#include "Widget.h"

#include <QDebug>

#include <QTimer>

Widget::Widget(QWidget *parent) :

    QWidget(parent),

    btn1("test1",this),

    btn2("test2",this),

    btn3("test3",this),

    btn4("test4",this)

{

    btn1.setMinimumSize(,);

    Stack = new QStackedLayout;

    Stack->addWidget(&btn1);

    Stack->addWidget(&btn2);

    Stack->addWidget(&btn3);

    Stack->addWidget(&btn4);

    Stack->setCurrentIndex();

    this->setLayout(Stack);

     /*启动定时器*/

     QTimer *timer = new QTimer(this);

     connect(timer, SIGNAL(timeout()), this, SLOT(time_handler()));

     timer->start();        //1000ms

}

void Widget::time_handler()

{

    static int index=;

    Stack->setCurrentIndex((index++)%);        //切换页面

    qDebug()<<"Timer out";

}

main.cpp

int main(int argc, char *argv[])

{

    QApplication app(argc,argv);

    Widget w;

    w.show();

    return app.exec();

}

效果:

接下来试验间接嵌套

修改构造函数

Widget::Widget(QWidget *parent) :

    QWidget(parent),

    btn1("test1",this),

    btn2("test2",this),

    btn3("test3",this),

    btn4("test4",this)

{

    btn1.setMinimumSize(,);

    QWidget *w = new QWidget;

    /*设置多个子组件的父类*/

    btn3.setParent(w);

    btn4.setParent(w);

    btn3.setMinimumSize(,);

    btn4.setMinimumSize(,);

    /*通过其它布局管理器来管理*/

    QVBoxLayout *Vlyt = new QVBoxLayout;

    Vlyt->addWidget(&btn3);

    Vlyt->addWidget(&btn4);

    Vlyt->setSpacing();

    w->setLayout(Vlyt);

    Stack = new QStackedLayout;

    Stack->addWidget(&btn1);

    Stack->addWidget(&btn2);

    Stack->addWidget(w);

    Stack->setCurrentIndex();

    this->setLayout(Stack);

    /*启动定时器*/

    QTimer *timer = new QTimer(this);

    connect(timer, SIGNAL(timeout()), this, SLOT(time_handler()));

    timer->start();        //1000ms

}

效果

11.QT-布局管理器(Box,Grid,Form,Stacked)的更多相关文章

第六章 Qt布局管理器Layout
第六章 Qt布局管理器Layout 大家有没有发现一个现象,我们放置一个组件,给组件最原始的定位是给出这个控件的坐标和宽高值,这样Qt就知道这个组件的位置.当用户改变窗口的大小,组件还静静地呆在原来的 ...
初识Qt布局管理器
Qt布局管理器的类有4种,它们分别为QHBoxLayout.QVBoxLayout.QGridLayout和QStackLayout.其中,QHBoxLayout实现水平布局,QVBoxLayout实 ...
Qt——布局管理器
教程地址运行截图: 代码: #include "mainwindow.h" #include <QApplication> #include <QHBoxLay ...
Qt 布局管理器
在一个颜值当道的今天,无论买衣服,买车还是追星,颜值的高低已经变成了大家最看重的(不管男性女性都一样,千万别和我说你不是):而对于程序猿来说,开发一款软件,不再只注重逻辑和稳定性,美观和用户友好性也是 ...
Qt布局管理器的使用（一）
曾经对Qt的布局管理器掌握的还不清楚,今天特意学习了下.感觉收获还挺大的,特意拿出来和大家分享. 首先.要明确布局管理器的用处,及使我们的界面看起来比較整洁.美化.另外一点就是为了使我们的控件可以更随 ...
QT5每日一学（五）QT布局管理器
Qt中的布局管理器主要包括 QBoxLayout基本布局管理器 QGridLayout栅格布局管理器 QFormLayout窗体布局管理器而基本布局管理器又分为QHBoxLayout水平布局管理器和 ...
QT 布局管理器的使用
很多的时候,需要布局管理器的使用, 在此介绍一下布局管理器的使用,直接上代码 #include "widget.h" #include "ui_widget.h" ...
Tkinter 的三大布局管理器 pack、grid 和 place用法汇总
学习python的tkinter免不了要对各个组件进行位置的排放与设定,常用的布局管理器有grid,pack和place.这三种均用于同一父组件下的组件布局,但是也是有区别的,先看下他们各自的含义吧. ...
tkinter之grid布局管理器详解
在很久之前,我发过一篇<tkinter模块常用参数>,里面已经几乎涵盖了tkinter的大部分教程. 好吧,其实也就是上一篇而已啦. 所谓布局,就是指控制窗体容器中各个控件(组件)的位置关 ...

随机推荐

Kompose: Docker-compose 到 Kubernetes 的迁移工具
Docker 让每个人都能够从 Docker Registry 启动一个打包好的 Docker 应用.Docker-Compose在Docker基础上解决了多容器应用之间的依赖启动问题. Docker ...
Spring Security 入门（1-3-1）Spring Security - http元素 - 默认登录和登录定制
登录表单配置 - http 元素下的 form-login 元素是用来定义表单登录信息的.当我们什么属性都不指定的时候 Spring Security 会为我们生成一个默认的登录页面. 如果不想使用默 ...
Linux网络配置（setup）
新装的Linux系统,想要快捷的网络配置,首选setup命令. 1.设置setup为中文. echo LANG="zh_CN.UTF-8" > /etc/sysconfig/ ...
js中的caller属性和callee属性
应该用"属性"来称呼caller和callee,而不是方法. caller:返回调用当前函数的函数的引用.a调用b,则返回a(a是boss,因为a把b叫过去干活了): callee ...
Ionic 2 开发（一）_安装与目录结构
由于公司开始使用后ionic 进行前段开发,现在需要学习下ionic,虽然是后台开发,但是还是有必要了解下的安装Node.js 官网:http://nodejs.cn/ 自行下载安装安装Ionic ...
[翻译] TensorFlow Programmer's Guide之Frequently Asked Questions（问得频率最多的几个问题）
目录: 特点和兼容性(Features and Compatibility) 建立一个TensorFlow图(Building a TensorFlow graph) 运行一个TensorFlow计算 ...
ECSHOP3.6版钻石小鸟模板修改教程
ecshop3.6版钻石小鸟模板修改明细 (1) 钻石小鸟首页轮播图修改 (2)首页布局设置 (修改前建议先备份下数据库. 后台/数据备份) (3)修改模板头部内容. 如下图. 后台,模板设置 ...
require.js按需加载使用简介
一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...
jquery中的attr（）与prop（）的区别
根据官方的建议:具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()
z-index的权重是叠加的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

11.QT-布局管理器(Box,Grid,Form,Stacked)

11.QT-布局管理器(Box,Grid,Form,Stacked)的更多相关文章

随机推荐

热门专题