Qt佈局管理器之水平佈局和垂直佈局(QBoxLayout)

Qt的標準佈局包括水平佈局、垂直佈局、網格佈局、表單佈局，水平佈局中的所有子控件中心軸在一條水平直線上，垂直佈局中的所有子控件中心軸在一條垂直直線上，網格佈局用來在網格中佈局子控件，表單佈局常用來做表單的輸入。

如下是將這幾個佈局結合起來設計出來的界面的例子(截取自Qt幫助手冊):

可以看到，編程者利用Qt的標準佈局便可以設計出排列有序、功能豐富的程序界面。

接下來我們針對Qt的標準佈局逐一展開進行介紹，針對Qt標準佈局的實現，均通過純代碼的方式進行演示(在ui設計器中也包含了Qt的標準佈局控件，在這裏不討論)。這一篇博客，主要針對水平佈局QHBoxLayout和垂直佈局QVBoxLayout進行說明。

佈局建立以及添加item和widget

新建Qt項目QBoxLayoutTest，不創建界面，整個項目只保留一個main.cpp文件。

mian函數中的代碼如下:

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QWidget *win = new QWidget();

    QHBoxLayout *hlay = new QHBoxLayout();

    QPushButton *bt1 = new QPushButton("bt1");
    QPushButton *bt2 = new QPushButton("bt2");
    QPushButton *bt3 = new QPushButton("bt3");
    QPushButton *bt4 = new QPushButton("bt4");

    hlay->addWidget(bt1);
    hlay->addWidget(bt2);
    hlay->addWidget(bt3);
    hlay->addWidget(bt4);

    win->setLayout(hlay);

    win->show();

    return a.exec();
}

其中，先是創建了一個空的widget和一個水平佈局器HBoxLayout，並創建了4個QPushButton。利用佈局器的addWidget方法將新創建的QPushButton添加到水平佈局器中。隨後調用widget的setLayout方法設置其Layout爲水平佈局器hlay，最後調用widget的show方法，在界面上顯示出來。

程序運行效果:

修改一下，加入垂直佈局後的代碼如下:

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    //定義widget
    QWidget *win = new QWidget();

    //創建水平佈局
    QHBoxLayout *hlay = new QHBoxLayout();

    //創建4個QPushButton，放入水平佈局中
    QPushButton *bt1 = new QPushButton("bt1");
    QPushButton *bt2 = new QPushButton("bt2");
    QPushButton *bt3 = new QPushButton("bt3");
    QPushButton *bt4 = new QPushButton("bt4");

    hlay->addWidget(bt1);
    hlay->addWidget(bt2);
    hlay->addWidget(bt3);
    hlay->addWidget(bt4);

    //新建垂直佈局
    QVBoxLayout *vlay = new QVBoxLayout();

    //創建3個QRadioButton
    QRadioButton *rb1 = new QRadioButton("QRadioButton 1");
    QRadioButton *rb2 = new QRadioButton("QRadioButton 2");
    QRadioButton *rb3 = new QRadioButton("QRadioButton 3");

    //將水平佈局放入
    vlay->addItem(hlay);
    vlay->addWidget(rb1);
    vlay->addWidget(rb2);
    vlay->addWidget(rb3);

    win->setLayout(vlay);

    win->show();

    return a.exec();
}

其中，先是創建一個水平佈局器，並將4個QPushButton放入其中。然後又創建了一個垂直佈局器，將前面創建的水平佈局器放入其中，成爲其中的一行。最後再在垂直佈局器中的後面三行加入三個QRadioButton。

其嵌套關係如下:

程序運行效果:

子控件間距及邊框距離設置

針對Qt標準佈局器，常常還需要設置子控件對邊框的距離、子控件之間的最小間距、這兩個屬性，其接口函數如下:

//設置內部控件與邊框的距離
void setContentsMargins(int left, int top, int right, int bottom)

//設置兩個子控件之間的間距
void setSpacing(int)

設置代碼:

//設置垂直佈局器的元素間距爲20像素點
vlay->setSpacing(20);

//設置水平佈局器元素間距爲20像素點
hlay->setSpacing(20);

運行效果:

控件大小範圍限定

通過上面的代碼我們發現一個現象：程序中並沒有去設置子控件的大小，其默認大小是Qt自動設置的，同時在窗口大小改變時，控件大小也會隨之調整。然而有時候我們並不想要這樣的效果，我們只想讓控件大小保持在某一範圍內，這時就需要用到下面幾個API進行設置了。

//設置控件最大大小
void setMaximumHeight(int maxh)
void setMaximumSize(const QSize &)
void setMaximumSize(int maxw, int maxh)
void setMaximumWidth(int maxw)

//設置控件最小大小:
void setMinimumHeight(int minh)
void setMinimumSize(const QSize &)
void setMinimumSize(int minw, int minh)
void setMinimumWidth(int minw)

其中設置最大大小和設置最小大小很好理解，無非就是設置控件的大小範圍。就好比QQ聊天界面，當將qq聊天界面拉大時，其消息輸入框和消息顯示框都相應的變大了，但其消息發送按鈕並不會有變化，通過限定其大小範圍便可實現。

限定bt4按鈕寬度大小範圍(高度使用推薦值)代碼如下:

bt4->setMinimumWidth(60);
bt4->setMaximumWidth(70);

拉伸窗口後的運行效果:

可以看到，在實際應用中，bt4的這種效果往往纔是我們所需要的。

空白空間的增加

空白空間主要有可伸縮空白空間和固定大小的空白空間。其中，可伸縮空白空間用的是最多的。

可伸縮空間的增加

在實際的項目中，往往還需要實現一種效果，當窗口大小改變時，控件的位置和大小都不會變，只有空白區域改變了大小。就像下面這種效果（截取自有道詞典）:

正常大小

窗口拉伸

可以看到，在窗口拉伸的過程中只有中間的空白部分被拉伸了，而左右兩邊的控件保持原來大小不變。

在Qt中通過addStretch函數可以實現此功能,在上面代碼的基礎上加入以下代碼:

QHBoxLayout *hlay2 = new QHBoxLayout();
QPushButton *btOK = new QPushButton("OK");
QPushButton *btCancel= new QPushButton("Cancel");

hlay2->addWidget(btOK);
//增加可伸縮空間
hlay2->addStretch();
hlay2->addWidget(btCancel);
vlay->addItem(hlay2);

運行效果:

固定大小的空白空間增加:

//添加一個大小爲size的非伸縮空間
void QBoxLayout::addSpacing(int size)]

在佈局器中添加一個空白區域，在這裏不做演示了。

拉伸係數設置：

Qt中可以設定控件的拉伸係數，也可以理解爲控件的縮放比例。

在上面的示例中添加以下代碼:

    QHBoxLayout *hlay3 = new QHBoxLayout();
    QPushButton *bt61 = new QPushButton("bt61");
    QPushButton *bt62= new QPushButton("bt62");
    QPushButton *bt63= new QPushButton("bt63");
    hlay3->addWidget(bt61);
    hlay3->addWidget(bt62);
    hlay3->addWidget(bt63);
    hlay3->setStretchFactor(bt61,1);
    hlay3->setStretchFactor(bt62,2);
    hlay3->setStretchFactor(bt63,4);

    vlay->addItem(hlay3);

運行效果:

bt61、bt62、bt63由於都設置了拉伸係數，所以他們的大小比例將會按照設置的拉伸係數進行設置。