Qt layout佈局

開發一個圖形界面應用程序，界面的佈局影響到界面的美觀。在設計一個界面之前，應該考慮到開發的界面可能給不用的用戶使用，而用戶的屏幕大小、縱橫比例、分辨率可能不同，界面還可能是可縮放的，程序應該可以適應這些變化。

        前面的程序中都是使用setGeometry()方法定位控件的位置，這個方法比較笨拙。試想如果控件很多，佈局這些控件需要編寫大量的代碼。幸運的是，QT提供了更好的方法佈局控件。

        常用的三種佈局方法：

（1）使用水平佈局類QHBoxLayout；

（2）使用垂直佈局類QVBoxLayout；

（3）使用網格佈局類QGridLayout。

這三種方法可以嵌套使用。

 

控件在佈局時可以先不指定父窗口，最後交由Layout統一指定。

 

示例：

#include <QApplication>
#include <QDialog>
#include <QPushButton>
#include <QLineEdit>
#include <QLayout>
#include <QLabel>


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

    QHBoxLayout *topLayout = new QHBoxLayout;
    QLabel *lbl = new QLabel(QWidget::tr("&Input:"), mainWindow);
    QLineEdit *lineEdt = new QLineEdit(mainWindow);
    lbl->setBuddy(lineEdt);
    topLayout->addWidget(lbl);
    topLayout->addWidget(lineEdt);

    QHBoxLayout *bomLayout = new QHBoxLayout;
    QPushButton *btn_ok = new QPushButton(QWidget::tr("OK"), mainWindow);\
    btn_ok->setDefault(true);
    QPushButton *btn_cancel = new QPushButton(QWidget::tr("Cancel"), mainWindow);
    bomLayout->addStretch();
    bomLayout->addWidget(btn_ok);
    bomLayout->addStretch();
    bomLayout->addWidget(btn_cancel);
    bomLayout->addStretch();

    QVBoxLayout *mainLayout = new QVBoxLayout;
    mainLayout->addLayout(topLayout);
    mainLayout->addLayout(bomLayout);

    mainWindow->setLayout(mainLayout);

    mainWindow->resize(300, 100);
    mainWindow->setWindowTitle(QWidget::tr("Qt Test"));
    mainWindow->show();

    return a.exec();
}

編譯運行，界面如下：

 

在界面中，最外部是mainLayout，它的類型是垂直佈局類QVBoxLayout。它包含了兩個水平佈局類QHBoxLayout，分別是topLayout和bomLayout。

 

比起QHBoxLayout和HVBoxLayout， QGridLayout運用更加靈活。

QGridLayout的常用方法

（1）addWidget：

//放置一個控件到一個單元格
void    addWidget ( QWidget * widget, int row, int column, Qt::Alignment alignment = 0 )
//如果放置的控件超出一個單元格，則使用該方法
void    addWidget ( QWidget * widget, int fromRow, int fromColumn, int rowSpan, int columnSpan, Qt::Alignment alignment = 0 )

    1）row：指放置控件的網格行號（行號從0開始）；

    2）colum：指放置控件的網格列號（從0開始）；

    3）alignment：對齊方式。

    4）fromRow：指放置控件的起始網格行號；

    5）fromColumn：指放置控件的起始網格列號；

    6）rowSpan：指放置控件佔多少行；

    7）columnSpan：指放置控件佔多少列。

（2）addLayout

void    addLayout ( QLayout * layout, int row, int column, Qt::Alignment alignment = 0 )
void    addLayout ( QLayout * layout, int row, int column, int rowSpan, int columnSpan, Qt::Alignment alignment = 0 )

參數與addWidget類似。

（3）setSpacing

void QGridLayout::setSpacing ( int spacing )

設置控件水平和垂直之間的間隔。

示例：

#include <QApplication>
#include <QDialog>
#include <QPushButton>
#include <QLineEdit>
#include <QLayout>
#include <QLabel>
#include <QTextEdit>


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

    QGridLayout *gridLayout = new QGridLayout;
    gridLayout->setColumnStretch(0, 1);
    gridLayout->setColumnStretch(1, 4);
    gridLayout->setColumnStretch(2, 1);
    gridLayout->setColumnStretch(3, 1);
    gridLayout->setColumnStretch(4, 4);

    gridLayout->setMargin(15);
    gridLayout->setColumnMinimumWidth(2, 15);


    QLabel *lbl1 = new QLabel(QWidget::tr("First Name:"));
    QLineEdit *edit1 = new QLineEdit;
    QLabel *lbl2 = new QLabel(QWidget::tr("Last Name:"));
    QLineEdit *edit2 = new QLineEdit;
    QLabel *lbl3 = new QLabel(QWidget::tr("Sex:"));
    QLineEdit *edit3 = new QLineEdit;
    QLabel *lbl4 = new QLabel(QWidget::tr("Birthday:"));
    QLineEdit *edit4 = new QLineEdit;
    QLabel *lbl5 = new QLabel(QWidget::tr("Address:"));
    QTextEdit *textEdt = new QTextEdit;



    gridLayout->addWidget(lbl1, 0, 0);
    gridLayout->addWidget(edit1, 0, 1);
    gridLayout->addWidget(lbl2, 0, 3);
    gridLayout->addWidget(edit2, 0, 4);
    gridLayout->addWidget(lbl3, 1, 0);
    gridLayout->addWidget(edit3, 1, 1);
    gridLayout->addWidget(lbl4, 1, 3);
    gridLayout->addWidget(edit4, 1, 4);
    gridLayout->addWidget(lbl5, 2, 0);
    gridLayout->addWidget(textEdt, 3, 0, 2, 5);

    mainWindow->setLayout(gridLayout);

    mainWindow->resize(400, 150);
    mainWindow->setWindowTitle(QWidget::tr("Qt Test"));
    mainWindow->show();

    return a.exec();
}

編譯運行，界面如圖：