基本布局QLayout类
Qt提供了QHBoxLayout类,QVBoxLayout类和QGridLayout类等的基本布局管理,分别是水平排列布局,垂直排列布局和网络排列布局,他们之间的继承关系如下:
布局中常用的有addWidget()和addLayout()/
addWidget()方法用于加入需要布局的控件,方法原型如下:
void addWidget()
{
QWidget *widget, //需要插入的控件对象
int fromRow, //插入的行
int fromColumn, //插入的列
int rowSpan, //表示占用的行数
int columnSpan, //表示占用的列数
Qt::Alignment alignment = 0 //描述各个控件的对齐方式
}
addLayout()方法用于加入子布局,方法原型如下:
void addLayout
{
QLayout *layout //表示需要插入的子布局对象
int row //插入的起始行
int column //插入的起始列
int rowSpan //表示占用的行数
int columnSpan //表示占用的列数
Qt::Alignment alignment = 0 //指定对齐的方式
}
下面我们用代码来解释一下这些东西怎么去使用。
首先新建Qt Widgets Application,项目名称为“UserInfo",基类选择”QDialog",取消“创建界面”复选框。
在dialog.h写入:
#ifndef DIALOG_H
#define DIALOG_H
#include <QDialog>
#include <QLabel>
#include <QLineEdit>
#include <QComboBox>
#include <QTextEdit>
#include <QGridLayout>
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
在dialog.cpp写入:
#include "dialog.h"
#include <QLabel>
#include <QLineEdit>
#include <QComboBox>
#include <QPushButton>
#include <QFrame>
#include <QGridLayout>
#include <QPixmap>
#include <QHBoxLayout>
Dialog::Dialog(QWidget *parent)
: QDialog(parent)
{
setWindowTitle(tr("UserInfo"));//窗口名称
/*****************左侧*****************************/
UserNameLabel = new QLabel(tr("UserName: "));
UserNameLineEdit = new QLineEdit;
NameLabel = new QLabel(tr("Name: "));
NameLineEdit = new QLineEdit;
SexLabel = new QLabel(tr("Sex: "));
SexComboBox = new QComboBox;
SexComboBox->addItem(tr("man"));
SexComboBox->addItem(tr("woman"));
DepartmentLabel = new QLabel(tr("Department: "));
DepartmentTextEdit = new QTextEdit;
AgeLabel = new QLabel(tr("Age: "));
AgeLineEdit = new QLineEdit;
OtherLabel = new QLabel(tr("Other: "));
//设置控件的风格,setFrameStyle是QFram的方法,参数以 | 的方式设定控件的面板
//风格,由形状(QFram::Shape)和阴影(QFram::shadow)两项配合设定
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);
//设置两列分别占用的空间比例,本例设定为1:3,即使对话框变小了,两列之间宽度比依然不变
LeftLayout->setColumnStretch(0,1);
LeftLayout->setColumnStretch(1,3);
/******************右侧*****************/
HeadLabel = new QLabel("Image; ");
HeadIconLabel = new QLabel;
//这里的1.png是你自己用来放入的图片哦,需要把自己的图片放到该文件所在目录
QPixmap icon("1.png");
HeadIconLabel->setPixmap(icon);
HeadIconLabel->resize(icon.width(),icon.height());
UpdateHeadBtn = new QPushButton(tr("Update"));
//完成右上侧头像选择区的布局
TopRightLayout = new QHBoxLayout();
TopRightLayout->setSpacing(20);//设定各个控件之间的距离为20
TopRightLayout->addWidget(HeadLabel);
TopRightLayout->addWidget(HeadIconLabel);
TopRightLayout->addWidget(UpdateHeadBtn);
//右下角部分
IntroductionLabel = new QLabel(tr("personal info:"));
IntroductionTextEdit = new QTextEdit;
//完成右侧的布局
RightLayout = new QVBoxLayout();
RightLayout->setMargin(10);
RightLayout->addLayout(TopRightLayout);
RightLayout->addWidget(IntroductionLabel);
RightLayout->addWidget(IntroductionTextEdit);
/******************底部**********************/
OkBtn = new QPushButton(tr("Confirm"));
CancelBtn = new QPushButton(tr("Cancel"));
ButtomLayout = new QHBoxLayout();
ButtomLayout->addStretch();//在按钮之前插入一个占位符,使两个按钮能够靠右对齐,并且在整个对话框大小变化时,保证按钮大小不变
//完成下方两个按钮的布局
ButtomLayout->addWidget(OkBtn);
ButtomLayout->addWidget(CancelBtn);
//实现主布局,指定父窗口this,也可以调用this->setLayout(mainLayout)实现。
QGridLayout *mainLayout = new QGridLayout(this);
mainLayout->setMargin(15);//设定对话框的边距为15
mainLayout->setSpacing(10);//设定对话框的控件之间的距离为10
mainLayout->addLayout(LeftLayout,0,0);
mainLayout->addLayout(RightLayout,0,1);
mainLayout->addLayout(ButtomLayout,1,0,1,2);
//设定最优化显示,并且使用户无法改变对话框的大小,所谓最优化显示就是控件都按其sizeHint()的大小显示
mainLayout->setSizeConstraint(QLayout::SetFixedSize);
}
Dialog::~Dialog()
{
}
运行结果如下:
OtherLabel->setFrameStyle(QFrame::Panel | QFrame::Sunken);
该句子的形状包括六种:
NoFrame , Panel , Box , HLine , VLine 及 WinPanel
阴影包括三种:
Plain , Raised , Sunken
框架外形有:参考网址:http://www.kuqin.com/qtdocument/qframe.html#setFrameShape
NoFrame不绘制任何东西。自然地,如果你使用这个,你就不用指定阴影风格。
Box绘制矩形框。内容看起来和周围的屏幕一样高,但是边界本身也许凸起或凹陷。
Panel绘制矩形凸起或凹陷的平板。
HLine绘制一条水平线(垂直中央)。
VLine绘制一条垂直线(水平中央)。
WinPanel绘制一个和Windows 95中一样的凸起或凹陷的矩形平板。指定这个外形设置线宽为2像素。WinPanel的提供是为了兼容性。为了使GUI风格独立,我们建议使用StyledPanel替换它。
StyledPanel绘制一个依赖于当前GUI风格的矩形平板。它可能是凸起的,也可能是凹陷的。
PopupPanel是用来绘制用于弹出窗口的框架。它的外观也依赖于当前GUI风格,通常和StyledPanel一样。
ToolBarPanel是用来绘制用于工具条的框架。它的外观也依赖于当前GUI风格。
MenuBarPanel是用来绘制用于菜单条的框架。它的外观也依赖于当前GUI风格。
LineEditPanel是用来绘制用于行编辑的框架。它的外观也依赖于当前GUI风格。
TabWidgetPanel是用来绘制用于Tab窗口部件的框架。它的外观也依赖于当前GUI风格。
阴影风格有:
Plain使用调色板的前景颜色绘制(没有任何三维效果)。
Raised使用当前颜色组的亮和暗颜色绘制三维的凸起线。
Sunken使用当前颜色组的亮和暗颜色绘制三维的凹陷线。
如果被指定的中间线宽大于0,在Raised或Sunken、Box÷HLine和VLine框架中会被绘制一条另外的线。当前颜色组的中间颜色被用于绘制中间线。
注意:
QHBoxLayout默认采用从左到右的顺序插入控件或子布局,
QVBoxLayout默认采用从上到下的顺序插入控件或子布局,
但是都可以使用setDirection()方法设定排列的顺序,比如:
layout->setDIrection(QBoxLayout::RightToLeft)