QT布局介绍 - 技术栈

QT常用布局如上图所示

水平/垂直布局

常用api:

特别注意的

addSapcing是在setSpacing上做加法处理，其中值可为正可为负

bash 复制代码

	 QHBoxLayout* layout = new QHBoxLayout(this);

    QLabel* lbl = new QLabel(this);
//    lbl->setFixedSize(40, 32);
    lbl->setText(tr("路径"));

    QLineEdit *pLineEdit = new QLineEdit(this);
//    pLineEdit->setFixedSize(100,32);
    pLineEdit->setMinimumWidth(50);

    QPushButton* pBtn = new QPushButton(this);
//    pBtn->setFixedSize(50,32);
    pBtn->setText(tr("打开"));

    qDebug() << "default widget content spacing: " << layout->spacing();

    layout->addWidget(lbl);
    layout->addSpacing(13);
    layout->addWidget(pLineEdit);
    layout->addSpacing(-7);
    layout->addWidget(pBtn);

    setLayout(layout);

    layout->setContentsMargins(20,0,20,0);

栅格布局

QGridLayout常用api

bash 复制代码

void addWidget(QWidget *, int row, int column, Qt::Alignment = Qt::Alignment());
    void addWidget(QWidget *, int row, int column, int rowSpan, int columnSpan, Qt::Alignment = Qt::Alignment());
    void addLayout(QLayout *, int row, int column, Qt::Alignment = Qt::Alignment());
    void addLayout(QLayout *, int row, int column, int rowSpan, int columnSpan, Qt::Alignment = Qt::Alignment());

如上addWidget的入参中row和column分别对应行和列索引值，rowSpan/columnSpan分别对应所占行和列数，如果想要添加到布局的控件占用宽和高度分别为2和3，则设置rowSpan为2且columnSpan为3

bash 复制代码

void setContentsMargins(int left, int top, int right, int bottom);//设置布局和外部其他控件的外间隔，左/上/右/下


void setHorizontalSpacing(int spacing);分别设置水平和垂直的布局内控件的内间隔
int horizontalSpacing() const;
void setVerticalSpacing(int spacing);
int verticalSpacing() const;

栅格布局想要实现如下效果

对应代码如下

bash 复制代码

this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinMaxButtonsHint);

    ui->setupUi(this);
    this->resize(400,300);

    //头像
    QLabel *pImageLabel = new QLabel(this);
    QPixmap pixmap(":/test.png");
    pImageLabel->setFixedSize(150,150);
    pImageLabel->setPixmap(pixmap);
    pImageLabel->setScaledContents(true);

    QLineEdit *pUserNameLe = new QLineEdit(this);
    pUserNameLe->setFixedSize(300, 50);
    pUserNameLe->setPlaceholderText(tr("QQ/手机/邮箱"));

    QLineEdit *pPasswordLe = new QLineEdit(this);
    pPasswordLe->setFixedSize(300, 50);
    pPasswordLe->setPlaceholderText(tr("密码"));
    pPasswordLe->setEchoMode(QLineEdit::Password);

    QPushButton *pForgetBtn = new QPushButton(this);
    pForgetBtn->setText(tr("找回密码"));
    pForgetBtn->setFixedWidth(80);

    QCheckBox *pRemeberCb = new QCheckBox(this);
    pRemeberCb->setText(tr("记住密码"));

    QCheckBox *pAutoLoginCb = new QCheckBox(this);
    pAutoLoginCb->setText(tr("自动登录"));

    QPushButton *pLoginBtn = new QPushButton(this);
    pLoginBtn->setText(tr("登录"));
    pLoginBtn->setFixedHeight(48);

    QPushButton *pRegisteRBtn = new QPushButton(this);
    pRegisteRBtn->setText(tr("注册账号"));
    pRegisteRBtn->setFixedHeight(48);

    QGridLayout* layout = new QGridLayout(this);
    //api原型
//    void addWidget(QWidget *, int row, int column, Qt::Alignment = Qt::Alignment());
//    void addWidget(QWidget *, int row, int column, int rowSpan, int columnSpan, Qt::Alignment = Qt::Alignment());

    layout->addWidget(pImageLabel, 0, 0, 3,1);
    layout->addWidget(pUserNameLe, 0, 1, 1,2);
    layout->addWidget(pPasswordLe, 1, 1, 1,2);
    layout->addWidget(pForgetBtn, 2, 1, 1,1);

    layout->addWidget(pRemeberCb, 2, 2, 1,1, Qt::AlignLeft | Qt::AlignVCenter);
    layout->addWidget(pAutoLoginCb, 2, 2, 1,1, Qt::AlignRight | Qt::AlignVCenter);

    layout->addWidget(pLoginBtn, 3,1,1,2);
    layout->addWidget(pRegisteRBtn,4,1,1,2);

    //分别设置水平和垂直的布局内控件的内间隔
    layout->setHorizontalSpacing(20);
    layout->setVerticalSpacing(20);

    //设置布局和外部其他控件的外间隔，左/上/右/下
    layout->setContentsMargins(30,30,30,30);

    setLayout(layout);