QLabel控件

用来设计UI界面，给界面添加图片。右键项目名称来添加资源文件，选择Add New。

填上资源文件的名称（可随意写一个），默认添加项目路径下。后面的步骤默认即可，点击完成。

添加 qss 文件。 QSS 文件是使用 Qt 程序相关联的样式表文件。它由 GUI 元素的外观和感觉，包括布局，颜色，鼠标的行为，大小和字体。它的风格，一个可以合并到一个 UI（用户界面）。 与 HTML 的 CSS 类似， Qt 的样式表是纯文本的格式定义，在应用程序运行时可以载入和解析这些样式定义，从而使应用程序的界面呈现不同的效果。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QLabel>
#include <QPushButton>

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
private:
    QLabel *labelString;
    QLabel *labelImage;
    QPushButton *pushButton;

private slots:
    void pushButtoncheckedchanged();
};
#endif // MAINWINDOW_H
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#include "mainwindow.h"
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    this->setGeometry( 0, 0, 800, 480);
    QPixmap pixmap(":/ig.png");
    labelImage = new QLabel(this);
    labelImage ->setGeometry( 0, 0 , 800, 480);
    labelImage ->setPixmap(pixmap);
    labelImage->setScaledContents(true);
    labelString = new QLabel(this);
    labelString ->setText("标签演示文本");
    labelString ->setGeometry( 0, 0, 100, 20);
    pushButton = new QPushButton("关闭窗口" ,this);
    pushButton->setGeometry(300,200,80,40);
    connect(pushButton, SIGNAL(clicked()), this, SLOT(pushButtoncheckedchanged()));
}
MainWindow::~MainWindow()
{
}
void MainWindow::pushButtoncheckedchanged()
{
    this->setVisible(false);
}

QDateEdit和QDateTimeEdit控件

QDateTimeEdit类提供一个用于编辑日期和时间的小部件，QDateTImeEdit允许用户使用键盘或箭头编辑日期。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QDateTimeEdit>
#include <QTimeEdit>
#include <QDateEdit>
class MainWindow : public QMainWindow
{
    Q_OBJECT
public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
private:
    QDateTimeEdit *dateTimeEdit;
    QTimeEdit *timeEdit;
    QDateEdit *dateEdit;
};
#endif // MAINWINDOW_H
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#include "mainwindow.h"
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    this->setGeometry( 0, 0, 800, 480);
    dateTimeEdit = new QDateTimeEdit(QDateTime::currentDateTime(), this);
    dateTimeEdit -> setGeometry( 300, 200, 200, 30);
    timeEdit = new QTimeEdit(QTime :: currentTime(), this);
    timeEdit ->setGeometry( 300, 240, 200, 30);
    dateEdit = new QDateEdit(QDate::currentDate(), this);
    dateEdit ->setGeometry( 300, 280, 200, 30);

}
MainWindow::~MainWindow()
{
}

QProgressBar控件

QProgressBar 继承 QWidget。 QProgressBar 小部件提供了一个水平或垂直的进度条。进度条用于向用户显示操作的进度，并向他们确认应用程序仍在运行。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QProgressBar>
#include <QTimer>

class MainWindow : public QMainWindow
{
	Q_OBJECT
	public:
	MainWindow(QWidget *parent = nullptr);
	~MainWindow();
private:
/* 声明对象 */
	QProgressBar *progressBar;
	QTimer *timer;

/* 用于设置当前 QProgressBar 的值 */
	int value;
	private slots:
/* 槽函数 */
void timerTimeOut();

};
#endif // MAINWINDOW_H
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
	: QMainWindow(parent)
{
/* 设置主窗体位置与大小 */
	this->setGeometry(0, 0, 800, 480);
	progressBar = new QProgressBar(this);
	progressBar->setGeometry(300, 200, 200, 60);
/*样式表设置，常用使用 setStyleSheet 来设置样式（实现界面美化的功能）， * 具体可参考 styleSheet */
	progressBar->setStyleSheet (
 		"QProgressBar{border:8px solid #FFFFFF;"
		"height:30;"
		"border-image:url(:/images/battery.png);" //背景图片
		"text-align:center;" // 文字居中
		"color:rgb(255,0,255);"
		"font:20px;" // 字体大小为 20px
		"border-radius:10px;}"
		"QProgressBar::chunk{"
		"border-radius:5px;" // 斑马线圆角
		"border:1px solid black;" // 黑边，默认无边
		"background-color:skyblue;"
		"width:10px;margin:1px;}" // 宽度和间距
);
/* 设置 progressBar 的范围值 */
	progressBar->setRange(0, 100);
/* 初始化 value 为 0 */
	value = 0;
/* 给 progressBar 设置当前值 */
	progressBar->setValue(value);
/* 设置当前文本字符串的显示格式 */
	progressBar->setFormat("充电中%p%");
/* 定时器实例化设置每 100ms 发送一个 timeout 信号 */
	timer = new QTimer(this);
	timer->start(100);
/* 信号槽连接 */
	connect(timer, SIGNAL(timeout()),this, SLOT(timerTimeOut()));
}
MainWindow::~MainWindow()
{
}
void MainWindow::timerTimeOut()
{
/* 定显示器时间到， value 值自加一 */
	value ++;
	progressBar->setValue(value);
/* 若 value 值大于 100，令 value 再回到 0 */
if(value>100)
	value = 0;
}

QFrame类

QFrame 继承 QWidget。 QFrame 类是有框架的窗口部件的基类，它绘制框架并且调用一个虚函数 drawContents()来填充这个框架。这个函数是被子类重新实现的。这里至少还有两个有用的函数： drawFrame()和 frameChanged()。

QPopupMenu 使用这个来把菜单“升高”，高于周围屏幕。 QProgressBar 有“凹陷”的外观。QLabel 有平坦的外观。这些有框架的窗口部件可以被改变。

QFrame::Shape 这个枚举类型定义了 QFrame 的框架所使用的外形。当前定义的效果有：
NoFrame - QFrame 不画任何东西
Box - QFrame 在它的内容周围画一个框
Panel - QFrame 画一个平板使内容看起来凸起或者凹陷
WinPanel - 像 Panel，但 QFrame 绘制三维效果的方式和 Microsoft Windows 95（及其它）的一样
ToolBarPanel - QFrame 调用 QStyle::drawToolBarPanel()
MenuBarPanel - QFrame 调用 QStyle::drawMenuBarPanel()
HLine - QFrame 绘制一个水平线，但没有框任何东西（作为分隔是有用的）
VLine - QFrame 绘制一个竖直线，但没有框任何东西（作为分隔是有用的）
StyledPanel - QFrame 调用 QStyle::drawPanel()
PopupPanel - QFrame 调用 QStyle::drawPopupPanel()
阴影风格有：
Plain 使用调色板的前景颜色绘制（没有任何三维效果）。
Raised 使用当前颜色组的亮和暗颜色绘制三维的凸起线。
Sunken 使用当前颜色组的亮和暗颜色绘制三维的凹陷线。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QFrame>
class MainWindow : public QMainWindow
{
	Q_OBJECT
public:
	MainWindow(QWidget *parent = nullptr);
	~MainWindow();
private:
/* 声明对象 */
	QFrame *hline;
	QFrame *vline;
};
#endif // MAINWINDOW_H
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
#include "mainwindow.h"
MainWindow::MainWindow(QWidget *parent)
	: QMainWindow(parent)
{
	/* 设置主窗体的显示位置与大小 */
	this->setGeometry(0, 0, 800, 480);
/* 实例化 */
	hline = new QFrame(this);
/* 确定起始点，设置长和宽，绘制距形 */
	hline->setGeometry(QRect(200, 100, 400, 40));
/* 设置框架样式为 Hline，水平，可设置为其他样式例如 Box，
* 由于是样式选择 HLine，所以只显示一条水平直线
*/
	hline->setFrameShape(QFrame::HLine);
/* 绘制阴影 */
	hline->setFrameShadow(QFrame::Sunken);
/* 实例化 */
	vline = new QFrame(this);
/* 确定起始点，设置长和宽，绘制距形 */
	vline->setGeometry(QRect(300, 100, 2, 200));
/* 设置框架样式为 Vline，垂直，可设置为其他样式例如 Box，
* 由于是样式选择 Vline，所以只显示一条垂直直线
*/
	vline->setFrameShape(QFrame::VLine);
/* 绘制阴影 */
	vline->setFrameShadow(QFrame::Sunken);
}
MainWindow::~MainWindow()
{
}

QBoxLayout类

QBoxLayout 继承 QLayout。 QBoxLayout 类提供水平或垂直地排列子部件。 QBoxLayout 获取从它的父布局或从 parentWidget()中所获得的空间，将其分成一列框，并使每个托管小部件填充一个框。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QPushButton>
class MainWindow : public QMainWindow
{
    Q_OBJECT
public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
private:
    QPushButton *pushButton[6];
    QWidget *hWidget;
    QWidget *vWidget;
    QHBoxLayout *hLayout; 
    QVBoxLayout *vLayout;
};
#endif // MAINWINDOW_H
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#include "mainwindow.h"
#include <QList>
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    this->setGeometry( 0 , 0, 800, 480);
    hWidget = new QWidget(this);
    hWidget -> setGeometry( 0 , 0, 800, 240);
    vWidget = new QWidget(this);
    vWidget -> setGeometry( 0, 240, 800, 240);
    hLayout = new QHBoxLayout();
    vLayout = new QVBoxLayout();
    QList<QString>list; //list放入字符串
    list<<"one"<<"two"<<"three"<<"four"<<"five"<<"six";
    for(int i = 0; i < 6; i++)
    {
        pushButton[i] = new QPushButton();
        pushButton[i]->setText(list[i]);
        if(i < 2) {
            hLayout->addWidget(pushButton[i]);//水平放置按钮
        }else{
            vLayout->addWidget(pushButton[i]);//垂直放置按钮
        }
    }
    hLayout->setSpacing(50);//间隔
    hWidget->setLayout(hLayout);
    vWidget->setLayout(vLayout);
}
MainWindow::~MainWindow()
{
}

QFormLayout布局

QFormLayout 继承 QLayout。 QFormLayout 类管理输入小部件及其关联标签的表单。 QFormLayout 是一个方便的布局类，它以两列的形式布局其子类。左列由标签组成，右列由“字段”小部件(QLineEdit(行编辑器)、 QSpinBox(旋转框等))组成。

可以用来规划用户密码登录的界面布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QFormLayout>
#include <QLineEdit>
class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
private:
    QWidget *fwidget;
    QLineEdit *userLineEdit;
    QLineEdit *passwordLineEdit;
    QFormLayout *formLayout;
};
#endif // MAINWINDOW_H
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    this->setGeometry( 0, 0, 800, 480);
    fwidget = new QWidget(this);
    fwidget ->setGeometry( 250, 100, 300, 200 );
    userLineEdit = new QLineEdit();
    passwordLineEdit = new QLineEdit();
    formLayout = new QFormLayout();
    formLayout ->addRow("用户名",userLineEdit);
    formLayout ->addRow("密码", passwordLineEdit);
    formLayout->setSpacing(10); //水平垂直间距
    formLayout->setMargin(20); //布局外框宽度
    fwidget->setLayout(formLayout);//将formLayout布局到fwidget里
}
MainWindow::~MainWindow()
{
}

QSpacerItem
QSpacerItem 继承 QLayoutItem。 QSpacerItem 类在布局中提供空白(空间间隔)。所以 QSpacerItem 是在布局中使用的。

可以用来布局一些按钮图标之类的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QPushButton>
#include <QBoxLayout>

class MainWindow : public QMainWindow
{
    Q_OBJECT
public:
	MainWindow(QWidget *parent  = nullptr);
	~MainWindow();
private:
	QPushButton *bt[4];
	QSpacerItem *vSpacer; //垂直间隔
	QSpacerItem *hSpacer;//水平间隔
	QWidget *widget;	//声明一个weidget来放布局
	QHBoxLayout *mainLayout;//主布局
	QVBoxLayout *vBoxLayout;//垂直布局
	QHBxoLayout *hBoxLayout;//水平布局
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
#include "mainwindow.h"
MainWindow::MainWindow(QWidget *parent)
	:QMainWindow(parent)
{
    this->setGeometry( 0, 0, 800, 480);
    
    widget = new QWidget(this);
    this->setCentralWidget(widget);
    vSpacer = new QSpacerItem( 10 , 10, QSizePolicy::Minimum, QSizePolicy::Expanding);
    hSpacer = new QSpacerItem( 10 , 10, QSizePolicy::Expanding, QSizePolicy :: Minimum);
    
    vBoxLayout = new QVBoxLayout();
    hBxoLayout = new QHBoxLayout();
    mainLayout = new QHBoxLayout();
    
    vBoxLayout->addSpacerItem(vSpacer);//vBoxLayout添加垂直间隔
    QList <QString>list;	//字符串插入list
    
    list << "按钮1"<< " 按钮2"<< "按钮3"<< "按钮4"；
    for(int i = 0; i < 4; i++)		//实例化按钮
    {
        bt[i] = new QPushButton();
        bt[i] = setText(list[i]);
        bt[i] ->setFixedSize( 60, 60);
        hBoxLayout->addWidget(bt[i]);
    }
    hBoxLayout->addSpacerItem(hSpacer);//hBoxLayout加入水平间隔
    mainLayout->addLayout(vBoxLayout); //主布局里加入垂直间隔
    mainLayout->addLayout(hBoxLayout); //主布局里加入水平间隔
    mainLayout->setSpacing(50);//设置部件间距
    widget->setLayout(mainLayout);//主布局为widget布局
}

SpinBox，DoubleSpinBox控件（数值调整控件）

数字显示框，显示整型和浮点型的数字。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QDoubleSpinbox>
class MainWindow : public QMainWindow
{
    Q_OBJECT
public:
	MainWindow(QWidget *parent = nullptr);
	~MainWindow();
private:
	QDoubleSpinBox *doubleSpinBox;
	
}
#endif
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#include "mainwindow.h"
MainWindow::MainWindow(QWidget *parent)
	:QMainWindow(parent)
{
    this->setGeometry( 0, 0, 800, 480);
    doubleSpinBox = new QDoubleSpinBox(this);
    doubleSpinBox ->setGeometry(300, 200, 200, 20);
    /* 设置前缀 */
	doubleSpinBox->setPrefix("激光功率");
	/* 设置后缀 */
	doubleSpinBox->setSuffix("%");
    /* 设置范围 */
	doubleSpinBox->setRange(00.00, 100.00);
	/* 设置初始值 */
	doubleSpinBox->setValue(20.00);
	/* 设置步长 */
	doubleSpinBox->setSingleStep(0.1);	
}