学习QT之基本布局

学习QT之基本布局


Qt提供了QHBoxLayout类、QVBoxLayout类及QGridLayout类等的基本布局管理,分别是水平排列布局、垂直排列布局和网格排列布局。各种布局类及继承关系如下图所示:
在这里插入图片描述
注意:QHBoxLayout默认采取的是以自左向右的方式顺序插入控件或子布局,也可以通过调用setDirection()方法设定排列的顺序(如:layout->setDirection(QBoxLayout::RightToLeft))。QVBoxLayout默认采取的是以自上而下的方式顺序插入控件或子布局,也可通过调用setDirection()方法设定排列的顺序。

布局中常用的方法有addWidget()和addLayout().

addWidget()方法用于加入需要布局的控件,方法原型如下:

void addWidget
(
	QWidget *widget,               //需要插入的控件对象
    int fromRow,                   //插入的行
    int fromColumn,                //插入的列
    int rowSpan,                   //表示占用的行数
    int columnSpan,                //表示占用的列数
    Qt::Allignment alignment=0     //描述各个控件的对齐方式
)

addLayout()方法用于加入子布局,方法原型如下:

void addLayout
(
	QLayout *layout,               //表示需要插入的子布局对象
    int row,                       //插入的起始行
    int column,                    //插入的起始列
    int rowSpan,                   //表示占用的行数
    int columnSpan,                //表示占用的列数
    Qt::Alignment alignment=0      //指定对齐方式
)

下面通过一个实例来详细说明:

本实例共用到了四个布局管理器,分别是LeftLayout、RightLayout、BottomLayout和MainLayout,其布局框架如下图所示:

在这里插入图片描述

//头文件
#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include <QLabel>
#include <QLineEdit>
#include <QComboBox>
#include <QTextEdit>
#include <QGridLayout>
#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QPushButton>

class Dialog : public QDialog
{
    Q_OBJECT

public:
    Dialog(QWidget *parent = 0);
    ~Dialog();

private:
    //左侧
    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 // DIALOG_H
//源文件
#include "dialog.h"

Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
{
    setWindowTitle(tr("UserInfo"));
    /*************左侧************************/
    UserNameLabel = new QLabel(tr("用户名:"));
    UserNameLineEdit = new QLineEdit;
    NameLabel = new QLabel(tr("姓名:"));
    NameLineEdit = new QLineEdit;
    SexLabel = new QLabel(tr("性别:"));
    SexComboBox = new QComboBox;
    SexComboBox->addItem(tr("女"));
    SexComboBox->addItem(tr("男"));
    DepartmentLabel = new QLabel(tr("部门:"));
    DepartmentTextEdit = new QTextEdit;
    AgeLabel = new QLabel(tr("年龄:"));
    AgeLineEdit = new QLineEdit;
    otherLabel = new QLabel(tr("备注"));
    otherLabel->setFrameStyle(QFrame::Panel | QFrame::Sunken);//(a)
    LeftLayout = new QGridLayout();//(b)
    //向布局中加入需要的控件
    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);//(c)
    LeftLayout->setColumnStretch(1,3);
    /*************右侧************************/
    HeadLabel = new QLabel(tr("头像:"));
    HeadIconLabel = new QLabel;
    QPixmap icon("321.png");//图片放在项目的构建目录之下
    HeadIconLabel->setPixmap(icon);
    HeadIconLabel->resize(icon.width(),icon.height());
    UpdateHeadBtn = new QPushButton(tr("更新"));
    //完成右上侧头像选择区的布局
    TopRightLayout = new QHBoxLayout();
    TopRightLayout->setSpacing(20);
    TopRightLayout->addWidget(HeadLabel);
    TopRightLayout->addWidget(HeadIconLabel);
    TopRightLayout->addWidget(UpdateHeadBtn);
    IntroductionLabel = new QLabel(tr("个人说明:"));
    IntroductionTextEdit = new QTextEdit;
    //完成右侧的布局
    RightLayout = new QVBoxLayout();
    RightLayout->setMargin(10);
    RightLayout->addLayout(TopRightLayout);
    RightLayout->addWidget(IntroductionLabel);
    RightLayout->addWidget(IntroductionTextEdit);
    /*************底部************************/
    okBtn = new QPushButton(tr("确定"));
    CancelBtn = new QPushButton(tr("取消"));
    //完成下方两个按钮的布局
    ButtomLayout = new QHBoxLayout();
    ButtomLayout->addStretch();//(d)
    ButtomLayout->addWidget(okBtn);
    ButtomLayout->addWidget(CancelBtn);
    /*----------------------------------------------------*/
    QGridLayout *mainLayout = new QGridLayout(this);//(e)
    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);//(f)
}

Dialog::~Dialog()
{

}

(a)OtherLabel->setFrameStyle(QFrame::Panel | QFrame::Sunken):设置控件的风格。setFrameStyle()QFrame的方法,参数以或(|)的方式设定控件的面板风格,由形状(QFrame::Shape)和阴影(QFrame::shadow)两项配合设定。其中,形状包括六种,分别是NoFrame、Panel、Box、HLine、VLine以及WinPanel;阴影包括三种,分别是Plain、Raised和Sunken。

(b)LeftLayout = new QGridLayout():左部布局,由于此布局管理器不是主布局管理器,所有不用指定父窗口。

(c)LeftLayout->setColumnStretch(0,1)、LeftLayout->setColumnStretch(1,3):设定两列分别占用空间的比例,本例设定为1:3。即使对话框大小改变了,两列之间的宽度比依然保持不变

(d)ButtomLayout->addStretch():在按钮之前插入一个占位符,使两个按钮能够靠右对齐,并且在整个对话框的大小发送改变时,保证按钮的大小不发生改变。

(e)QGridLayout *mainLayout = new QGridLayout(this):实现主布局,指定父窗口this,也可调用this->setLayout(mainLayout)实现。

(f)mainLayout->setSizeConstraint(QLayout::SetFixedSize):设定最优化显示,并且使用户无法改变对话框的大小。所谓最优化显示,即控件都按其sizeHint()的大小显示。

程序运行,结果如下:

在这里插入图片描述

发布了60 篇原创文章 · 获赞 8 · 访问量 3157

猜你喜欢

转载自blog.csdn.net/Mr_robot_strange/article/details/104630541