8.2 基本布局管理器(QBoxLayout)


***【在线视频教程】***

好文章,来自【福优学苑@音视频+流媒体】

8.2 基本布局管理器(QBoxLayout)


案例:chapter8_1_dialog

下面先来看一个例子。

新建 QtGui 应用(Dialog),项目名称为 chapter8_1_dialog,,基类选择 QWidget


然后打开 dialog. ui 文件,在设计模式中向界面拖入一个字体选择框 Font Combo Box 和文本编辑器 Text Edit 部件。


然后单击主界面并按下 Ctrl + L 快捷键,或者单击设计器上边栏中的“垂直布局”图标来对主界面进行垂直布局管理。

也可以在主界面上右击,在弹出的菜单中选择“布局→垂直布局”,这样便设置了顶层布局管理器,可以看到两个部件已经填满了整个界面。

这时运行程序,然后拉伸窗口,两个部件会随着窗口的大小变化而变化,如下图所示。

这就是布局管理器在起作用。

image.png

从此,宝宝再也用担心控件大小的变化问题了。


案例分析

好文章,来自【福优学苑@音视频+流媒体】

image.png

image.png

好文章,来自【福优学苑@音视频+流媒体】

代码实现布局

下面打破已有布局,使用代码实现水平布局。

在界面上右击,然后在右键菜单中选择“打破布局”,或者单击设计器上边栏中的打破布局图标。


在 dialog.cpp 文件中,

添加头文件 #include <QVBoxLayout>,

并在 dialog类的构造闲数中添加如下代码:


// 用代码方式实现布局

    QVBoxLayout *pvLayout = new QVBoxLayout();

    pvLayout->addWidget(ui->cb_test);

    pvLayout->addWidget(ui->te_test);

    this->setLayout(pvLayout);



Layout设定比例

好文章,来自【福优学苑@音视频+流媒体】

第一.界面设计器

创建GUI程序,拖入一个TreeWidget,一个TableWidget

布局->选定要进行布局的控件,然后鼠标右击最后一项就是布局。


比例调整:如果想对两个控件进行比例调控的话,就直接用到layout下的layoutstretch进行比例调整,这个比例调整会一直保持不变动。

image.png



第二.代码方式

函数QHBoxLayout::setStretch(int index, int stretch),可以将水平布局添加的控件按照比例进行伸缩。

比如在QHBoxLayout水平布局上添加了两个控件,当写如下语句时,


    //初始化

    QHBoxLayout *m_VBoxLayout = new QHBoxLayout(this);

    QTreeView *m_TreeView = new QTreeView;

    QTableView *m_TableView = new QTableView;

    

    //添加控件

    m_VBoxLayout->addWidget(m_TreeView);        

    m_VBoxLayout->addWidget(m_TableView);

    

     //设置拉伸比例

    m_VBoxLayout->setStretch(0,1);             

    m_VBoxLayout->setStretch(1,4);

表明该垂直布局添加的两个控件索引0和索引1,分别按照1:4比例进行伸缩


好文章,来自【福优学苑@音视频+流媒体】

案例:chapter8_1_mainwindow

   image.png

好文章,来自【福优学苑@音视频+流媒体】





坑:setLayout: 

Attempting to set QLayout "" on MainWindow "MainWindow", which already has a layout...


image.png

 

好文章,来自【福优学苑@音视频+流媒体】

错误描述:

给QWidget或者QDialog设置布局的时候方式很简单。

创建好一个布局:mainLayout,然后不停地把各个控件往mainLayout里面放,最后调用setLayout(mainLayout)就行了。


QMainWindow中使用这个方法的时候却不管用:

    因为QMainWindow是默认有layout的,所以再次设置layout会失效


会出现这种提示:

QWidget::setLayout: Attempting to set QLayout "" on MainWindow "", which already has a layout

这句话的意思是说,你已经给MainWindow设置过一个布局了,再设置一个会出错。


image.png

出现这个的原因是,

如果你的窗口继承的是QMainwindow,需要设置setCentralWidget(); 如下:


QWidget * mainWidget = new QWidget ( mainWindow) ;

mainWidget - >setLayout( yourMainLayout) ;

mainWindow- >setCentralWidget(mainWidget ) ;

设置好一个widget,将其加入到CentralWidget即可。

好文章,来自【福优学苑@音视频+流媒体】


解决办法:

该如何给QMainWindow正确地设置布局呢

要想QMainWidget创建布局,合理的步骤应该是这样的:


  1. 第一步创建一个QWidget实例,并将这个实例设置为centralWidget:

  2. 然后创建一个主布局mainLayout,并把所需要的所有控件都往里面放(工具栏、菜单栏、状态栏除外):

  3. 最一步就是将widget的布局设置为mainLayout

好文章,来自【福优学苑@音视频+流媒体】


好文章,来自【福优学苑@音视频+流媒体】
***【在线视频教程】***