Qt学习07——布局管理

本文分别介绍分割窗口类QSplitter、停靠窗口类QDockWidget、堆栈窗体类QStackWidget的使用，并通过实例展示效果。

（本文中的UI均由代码实现，注意添加相应库函数到头文件中）

一、分割窗口类QSplitter

QSplitter用于分割窗口的布局。

例1：三个窗口可以任意切割大小。

#include "widget.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QSplitter *splitterMain = new QSplitter(Qt::Horizontal,0);
    QTextEdit *textLeft = new QTextEdit(QObject::tr("Left TextEdit"),splitterMain);
    textLeft->setAlignment(Qt::AlignCenter);

    QSplitter *splitterRight = new QSplitter(Qt::Vertical,splitterMain);
    splitterRight->setOpaqueResize(false);
    //设置分割条拖动时是否实时更新，默认为true。设为false则在鼠标拖动完成之后才显示新位置的分割条。
    //这里设置左右分割条实时更新，上下分割条分割完成后更新。
    QTextEdit *textTop = new QTextEdit(QObject::tr("Top TextEdit"),splitterRight);
    QTextEdit *textBottom = new QTextEdit(QObject::tr("Bottom TextEdit"),splitterRight);
    textTop->setAlignment(Qt::AlignCenter);
    textBottom->setAlignment(Qt::AlignCenter);

    splitterMain->setStretchFactor(1,1);
    //设定控件可伸缩性。第一个参数用于指定设置的控件序号，第二个参数大于0表示可伸缩。
    //这里设置编号为1的splitterRight可伸缩，当整个窗口变化时，左侧宽度不变，右侧随大小调整。
    splitterMain->setWindowTitle(QObject::tr("Splitter Test"));//设置窗口标题栏
    splitterMain->show();

    return a.exec();
}

输出

二、停靠窗口类QDockWidget

QDockWidget用于设置窗口的停靠功能。

设置停靠窗口的一般流程：

1、创建一个QDockWidget对象的停靠窗体；

2、设置此停靠窗体的属性，如setFeatures()和setAllowedAreas()两种方法。

例2：窗口1可在主窗口左右停靠，窗口2只能浮动和在右部停靠且不能移动，窗口3可实现各种方式的停靠。

#include "dockwidget.h"
#include "ui_dockwidget.h"

DockWidget::DockWidget(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::DockWidget)
{
    ui->setupUi(this);

    setWindowTitle(tr("DockWindow"));
    QTextEdit *tx = new QTextEdit(this);
    //定义一个文本编辑框作为一个主窗口
    tx->setText(tr("Main Window"));
    tx->setAlignment(Qt::AlignCenter);
    setCentralWidget(tx);
    //设置文本编辑框为主窗口的中央窗体

    QDockWidget *dock = new QDockWidget(tr("DockWindow1"),this);
    dock->setFeatures(QDockWidget::DockWidgetMovable);
    //设置dock属性为可移动
    dock->setAllowedAreas(Qt::LeftDockWidgetArea|Qt::RightDockWidgetArea);
    //设置可移动范围为左右区域
    QTextEdit *tx1 = new QTextEdit();
    tx1->setText(tr("Window1"));
    dock->setWidget(tx1);
    addDockWidget(Qt::RightDockWidgetArea,dock);

    dock = new QDockWidget(tr("DockWindow2"),this);
    dock->setFeatures(QDockWidget::DockWidgetClosable|QDockWidget::DockWidgetFloatable);
    //设置dock属性为可关闭、可浮动
    QTextEdit *tx2 = new QTextEdit();
    tx2->setText(tr("window2"));
    dock->setWidget(tx2);
    addDockWidget(Qt::RightDockWidgetArea,dock);

    dock = new QDockWidget(tr("DockWindow3"),this);
    dock->setFeatures(QDockWidget::AllDockWidgetFeatures);
    //设置dock具备全部特性
    QTextEdit *tx3 = new QTextEdit();
    tx3->setText(tr("Window3"));
    dock->setWidget(tx3);
    addDockWidget(Qt::RightDockWidgetArea,dock);

}

DockWidget::~DockWidget()
{
    delete ui;
}

三、堆栈窗体类QStackedWidget

堆栈窗体常与列表框QListWidget和下拉列表框QComboBox配合使用。

例3：左侧选择不同选项，右侧显示相应的窗体。

stackwidget.cpp

#include "stackwidget.h"
#include "ui_stackwidget.h"

stackWidget::stackWidget(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::stackWidget)
{
    ui->setupUi(this);

    setWindowTitle(tr("StackWidget"));
    list = new QListWidget(this);
    list->insertItem(0,tr("Window1"));
    list->insertItem(1,tr("Window2"));
    list->insertItem(2,tr("Window3"));

    label1 = new QLabel(tr("windowtest1"));
    label2 = new QLabel(tr("windowtest2"));
    label3 = new QLabel(tr("windowtest3"));

    stack = new QStackedWidget(this);
    stack->addWidget(label1);
    stack->addWidget(label2);
    stack->addWidget(label3);

    mainLayout = new QHBoxLayout(this);
    mainLayout->setMargin(5);
    mainLayout->setSpacing(5);
    mainLayout->addWidget(list);
    mainLayout->addWidget(stack,0,Qt::AlignHCenter);
    mainLayout->setStretchFactor(list,1);
    mainLayout->setStretchFactor(stack,3);
    connect(list,SIGNAL(currentRowChanged(int)),stack,SLOT(setCurrentIndex(int)));
}

stackWidget::~stackWidget()
{
    delete ui;
}

stackwidget.h

#ifndef STACKWIDGET_H
#define STACKWIDGET_H

#include <QDialog>
#include <QListWidget>
#include <QStackedWidget>
#include <QLabel>
#include <QHBoxLayout>

namespace Ui {
class stackWidget;
}

class stackWidget : public QDialog
{
    Q_OBJECT

public:
    explicit stackWidget(QWidget *parent = 0);
    ~stackWidget();

private:
    Ui::stackWidget *ui;
    QStackedWidget *stack;
    QListWidget *list;
    QLabel *label1;
    QLabel *label2;
    QLabel *label3;
    QHBoxLayout *mainLayout;
};

#endif // STACKWIDGET_H

四、基本布局QLayout

Qt提供了几种基本的布局管理，分别是水平排列布局（QHBoxLayout）、垂直排列布局（QVBoxLayout）、网格排列布局（QGridLayout），他们之间继承关系如下：

layout.h

#ifndef LAYOUT_H
#define LAYOUT_H

#include <QDialog>
#include <QLabel>
#include <QLineEdit>
#include <QComboBox>
#include <QTextEdit>
#include <QGridLayout>
#include <QPushButton>
#include <QFrame>
#include <QTextCodec>

namespace Ui {
class layout;
}

class layout : public QDialog
{
    Q_OBJECT

public:
    explicit layout(QWidget *parent = 0);
    ~layout();

private:
    Ui::layout *ui;

    QLabel *UserNameLabel;
    QLabel *NameLabel;
    QLabel *SexLabel;
    QLabel *DepartmentLabel;
    QLabel *AgeLabel;
    QLabel *OtherLabel;
    QLineEdit *UserNameLineEdit;
    QLineEdit *NameLineEdit;
    QComboBox *SexComboBox;
    QTextEdit *DepartmentTextEdit;
    QLineEdit *AgeLineEdit;
    QGridLayout *LeftLayout;
    //右侧
    QLabel *HeadLabel;          //右上角部分
    QLabel *HeadIconLabel;
    QPushButton *UpdateHeadBtn;
    QHBoxLayout *TopRightLayout;

    QLabel *IntroductionLabel;
    QTextEdit *IntroductionTextEdit;
    QVBoxLayout *RightLayout;
    //底部
    QPushButton *OkBtn;
    QPushButton *CancelBtn;
    QHBoxLayout *ButtomLayout;
};

#endif // LAYOUT_H

layout.cpp

#include "layout.h"
#include "ui_layout.h"

layout::layout(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::layout)
{
    ui->setupUi(this);
    setWindowTitle(tr("UserInfo"));
    /************** 左侧 ******************************/
    UserNameLabel =new QLabel(tr("user:"));

    UserNameLineEdit =new QLineEdit;
    NameLabel = new QLabel(tr("name:"));
    NameLineEdit = new QLineEdit;
    SexLabel = new QLabel(tr("sex:"));
    SexComboBox = new QComboBox;
    SexComboBox->addItem(tr("female"));
    SexComboBox->addItem(tr("male"));
    DepartmentLabel = new QLabel(tr("department"));
    DepartmentTextEdit = new QTextEdit;
    AgeLabel = new QLabel(tr("age"));
    AgeLineEdit = new QLineEdit;
    OtherLabel = new QLabel(tr("mark:"));
    OtherLabel->setFrameStyle(QFrame::Panel|QFrame::Sunken);

    LeftLayout =new QGridLayout();
    LeftLayout->addWidget(UserNameLabel,0,0);     			//用户名
    LeftLayout->addWidget(UserNameLineEdit,0,1);

    LeftLayout->addWidget(NameLabel,1,0);                	//姓名
    LeftLayout->addWidget(NameLineEdit,1,1);

    LeftLayout->addWidget(SexLabel,2,0);                   	//性别
    LeftLayout->addWidget(SexComboBox,2,1);

    LeftLayout->addWidget(DepartmentLabel,3,0);           	//部门
    LeftLayout->addWidget(DepartmentTextEdit,3,1);

    LeftLayout->addWidget(AgeLabel,4,0);                    //年龄
    LeftLayout->addWidget(AgeLineEdit,4,1);

    LeftLayout->addWidget(OtherLabel,5,0,1,2);             	//其他

    LeftLayout->setColumnStretch(0,1);
    LeftLayout->setColumnStretch(1,3);
    /*********右侧*********/
    HeadLabel = new QLabel(tr("picture"));                    //右上角部分
    HeadIconLabel = new QLabel;
    QPixmap icon("312.png");
    HeadIconLabel->setPixmap(icon);
    HeadIconLabel->resize(icon.width(),icon.height());
    UpdateHeadBtn = new QPushButton(tr("update"));

    TopRightLayout = new QHBoxLayout();
    TopRightLayout->setSpacing(20);
    TopRightLayout->addWidget(HeadLabel);
    TopRightLayout->addWidget(HeadIconLabel);
    TopRightLayout->addWidget(UpdateHeadBtn);
    IntroductionLabel = new QLabel(tr("description"));         //右下角部分
    IntroductionTextEdit = new QTextEdit;

    RightLayout = new QVBoxLayout();
    RightLayout->setMargin(10);
    RightLayout->addLayout(TopRightLayout);
    RightLayout->addWidget(IntroductionLabel);
    RightLayout->addWidget(IntroductionTextEdit);
    /*--------------------- 底部 --------------------*/
    OkBtn = new QPushButton(tr("Ok"));
    CancelBtn = new QPushButton(tr("Cancel"));

    ButtomLayout = new QHBoxLayout();
    ButtomLayout->addStretch();
    ButtomLayout->addWidget(OkBtn);
    ButtomLayout->addWidget(CancelBtn);
    /*---------------------------------------------*/
    QGridLayout *mainLayout = new QGridLayout(this);
    mainLayout->setMargin(15);
    mainLayout->setSpacing(10);
    mainLayout->addLayout(LeftLayout,0,0);
    mainLayout->addLayout(RightLayout,0,1);
    mainLayout->addLayout(ButtomLayout,1,0,1,2);
    mainLayout->setSizeConstraint(QLayout::SetFixedSize);

}

layout::~layout()
{
    delete ui;
}