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;
}