8、QT基础——常用控件

矫情吗；* 2023-01-13 05:59 153阅读 0赞

Qt为我们应用程序界面开发提供的一系列的控件，下面我们介绍两种最常用一些控件，所有控件的使用方法我们都可以通过帮助文档获取。

## 8.1 QLabel控件使用 ##

QLabel是我们最常用的控件之一，其功能很强大，我们可以用来显示文本，图片和动画等。

### 显示文字 （普通文本、html） ###

通过QLabel类的setText函数设置显示的内容:

void    setText(const QString &)

1.  可以显示普通文本字符串

QLable \*label = new QLable;

label->setText(“Hello, World!”);

1.  可以显示HTML格式的字符串

比如显示一个链接:

QLabel \* label = new QLabel(this);

label ->setText("Hello, World");

label ->setText("<h1><a href=\\"https://www.baidu.com\\">百度一下</a></h1>");

label ->setOpenExternalLinks(true);

其中setOpenExternalLinks()函数是用来设置用户点击链接之后是否自动打开链接，如果参数指定为true则会自动打开。

### 显示图片 ###

可以使用QLabel的成员函数setPixmap设置图片

void  setPixmap(const QPixmap &)

首先定义QPixmap对象

QPixmap pixmap;

然后加载图片

pixmap.load(":/Image/boat.jpg");

最后将图片设置到QLabel中

QLabel \*label = new QLabel;

label.setPixmap(pixmap);

### 显示动画 ###

可以使用QLabel 的成员函数setMovie加载动画，可以播放gif格式的文件

void  setMovie(QMovie \* movie)

首先定义QMovied对象，并初始化:

QMovie \*movie = new QMovie(":/Mario.gif");

播放加载的动画：

movie->start();

将动画设置到QLabel中：

QLabel \*label = new QLabel；

label->setMovie(movie);

## 8.2 QLineEdit ##

Qt提供的单行文本编辑框。

设置/获取内容

1.  获取编辑框内容使用text（），函数声明如下：

QString     text() const

1.  设置编辑框内容

void  setText(const QString &)

设置显示模式

使用QLineEdit类的setEchoMode () 函数设置文本的显示模式,函数声明:

void  setEchoMode(EchoMode mode)

EchoMode是一个枚举类型,一共定义了四种显示模式:

1.  QLineEdit::Normal 模式显示方式，按照输入的内容显示。
2.  QLineEdit::NoEcho 不显示任何内容，此模式下无法看到用户的输入。
3.  QLineEdit::Password  密码模式，输入的字符会根据平台转换为特殊字符。
4.  QLineEdit::PasswordEchoOnEdit   编辑时显示字符否则显示字符作为密码。

另外，我们再使用QLineEdit显示文本的时候，希望在左侧留出一段空白的区域，那么，就可以使用QLineEdit给我们提供的setTextMargins函数：

void setTextMargins(int left, int top, int right, int bottom)

用此函数可以指定显示的文本与输入框上下左右边界的间隔的像素数。

## 8.3 其他控件 ##

Qt中控件的使用方法可参考Qt提供的帮助文档。

## 8.4 自定义控件 ##

在搭建Qt窗口界面的时候，在一个项目中很多窗口，或者是窗口中的某个模块会被经常性的重复使用。一般遇到这种情况我们都会将这个窗口或者模块拿出来做成一个独立的窗口类，以备以后重复使用。

在使用Qt的ui文件搭建界面的时候，工具栏栏中只为我们提供了标准的窗口控件，如果我们想使用自定义控件怎么办？

例如：我们从QWidget派生出一个类SmallWidget，实现了一个自定窗口，

// smallwidget.h

class SmallWidget : public QWidget

Q\_OBJECT

public:

explicit SmallWidget(QWidget \*parent = 0);

signals:

public slots:

private:

QSpinBox\* spin;

QSlider\* slider;

\};

// smallwidget.cpp

SmallWidget::SmallWidget(QWidget \*parent) : QWidget(parent)

spin = new QSpinBox(this);

slider = new QSlider(Qt::Horizontal, this);

// 创建布局对象

QHBoxLayout\* layout = new QHBoxLayout;

// 将控件添加到布局中

layout->addWidget(spin);

layout->addWidget(slider);

// 将布局设置到窗口中

setLayout(layout);

// 添加消息响应

connect(spin,

static\_cast<void (QSpinBox::\*)(int)>(&QSpinBox::valueChanged),

slider, &QSlider::setValue);

connect(slider, &QSlider::valueChanged,

spin, &QSpinBox::setValue);

![20210416133027566.png][]

那么这个SmallWidget可以作为独立的窗口显示,也可以作为一个控件来使用：

打开Qt的.ui文件,因为SmallWidget是派生自Qwidget类,所以需要在ui文件中先放入一个QWidget控件, 然后再上边鼠标右键

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaGhoaGhoaGh3d3d3d3d3d3d3_size_16_color_FFFFFF_t_70][]

弹出提升窗口部件对话框

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaGhoaGhoaGh3d3d3d3d3d3d3_size_16_color_FFFFFF_t_70 1][]

添加要提升的类的名字,然后选择 添加

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaGhoaGhoaGh3d3d3d3d3d3d3_size_16_color_FFFFFF_t_70 2][]

添加之后,类名会显示到上边的列表框中,然后单击提升按钮,完成操作.

我们可以看到, 这个窗口对应的类从原来的QWidget变成了SmallWidget

![20210416133106603.png][]

再次运行程序,这个widget\_3中就能显示出我们自定义的窗口了.

[20210416133027566.png]: /images/20221022/62a98fc438b045278e5d32a6917c5e0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaGhoaGhoaGh3d3d3d3d3d3d3_size_16_color_FFFFFF_t_70]: /images/20221022/eff1e0061a04494eb6c0fae5a6604dc9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaGhoaGhoaGh3d3d3d3d3d3d3_size_16_color_FFFFFF_t_70 1]: /images/20221022/e2ed9d77c288454e9a9800243de02d2e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaGhoaGhoaGh3d3d3d3d3d3d3_size_16_color_FFFFFF_t_70 2]: /images/20221022/eaa3a80da78a4e4189510f195b61847b.png
[20210416133106603.png]: /images/20221022/60836bd1b5b745b5a8c577d2ec73ab48.png