2.5Qt基础控件之显示控件组

2.5Qt基础控件之显示控件组

---

---

总体

显示控件组总览

1. Label:标签
2. Text Browser:文本浏览器
3. Graphics View:图形视图
4. Calendar Widget:日历
5. Lcd Number:液晶数字
6. Progress Bar:进度条
7. Horizontal Line:水平线
8. Vertical Line:垂直线
9. OpenGL Widget:供显示OpenGL图形功能
10. QQuickWidget:Quick应用

---

提示：以下是本篇文章正文内容，下面案例可供参考

2.5.1QLabel标签

一、QLabel标签是什么？

QLabel标签控件时可以用来显示文本或图片，没有提供用户交互功能。它还可以帮助其他控件获取焦点。
QLabel控件支持显示以下类型的数据（通过帮助手册查看）

二、使用步骤

1.创建QLabel示例

代码如下（示例）：

#include <QLabel>
QLabel *label=new QLabel("QLabel 标签控件",this);

2.QLabel标签常用的成员函数

• 创建QLabel示例

#include<QLabel>
QLabel *label = new QLabel("QLabel标签",this);

• QLabel标签常用的成员函数

1. 显示QString文本

QString text() const //获取显示的文本内容
void setText(const QString &) //设置显示的文本内容

​ 2.设置标签显示数值

void QLabel::setNum(int num) //显示整数
void QLabel::setNum(double num) //显示浮点数

​ 3.显示GIF动态图片

​ 播放GIF类型的图片可以使用QMovie类进行设置

void QLabel::setMovie(QMoie *movie)
QMovie* QLabel::movie() const

​ 示例：

#include "widget.h"
#include "ui_widget.h"
#include<QLabel>//  QLabel标签的头文件
#include<QMovie>
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //创建标签控件
    QLabel *myLabel = new QLabel(this);
    //设置标签的大小
    myLabel->setGeometry(0,0,800,400);
    //显示GIF图像
    //加双斜杠是因为电脑无法识别完整的路径
    QMovie *movie = new QMovie("C:\\Users\\72916\\Desktop\\MyQt\\qw.gif");
    myLabel->setMovie(movie);
    movie->start();
}

Widget::~Widget()
{
    delete ui;
}

​ 4.像素映射方式显示图片

const QPixmap *pixmap() const
void setPixmap(const QPixmap &)

示例：

/*创建标签控件*/
 my_label =new QLabel(this);
 /*设置标签的大小*/
 my_label->setGeometry(0,0,800,400);
 /*设置标签显示图片*/
 //使用资源路径下的图片
 // my_label->setPixmap(QPixmap(":/images/qt1.ico"));
 //支持填写图片绝对路径
 my_label->setPixmap(QPixmap("D: /1.bmp"));

​ 5.设置QLabel填充所有空间

这个属性设置了QLabel是否会按照其内容规模填满所有可用空间。QLabel启用该属性后，当标签显示一个QPixmap类型的图片时，图片会按照QLabel大小填充，这个属性的默认是无效的。

bool hasScaledContents() const
void setScaledContents(bool)

​ 6.设置文本显示的格式。

Qt::TextFormat textFomat() const
void setTextFormat(Qt::TextFormat)

Qt::PlainText:纯文本字符串

Qt::RichText:富文本或者HTML格式

​ 7.显示QPicture类型图片

void QLabel::setPicture(const QPicture & picture)
const QPicture *QLabel::picture() const

​ 8.设置QLabel显示文本自动换行

bool wordWrap() const
void setWordWrap(bool on)

该属性默认情况下是禁用的。设置了该属性之后，标签会根据自身的尺寸自动换行显示文本。

​ 9.清楚标签显示的任何内容

[slot] void QLabel::clear()

​ 10.设置QLabel的输入交互功能

textInteractionFlags() const
void setTextInteractionFlags(Qt::TextInteractionFlags flags)

Qt::TextInteractionFlag 枚举值：

Qt::NoTextInteraction	不支持输入
Qt::TextSelectableByMouse	文本可以用鼠标选择并复制到剪贴板，使用上下文菜单或标准的键盘快捷键。
Qt::TextSelectableByKeyboard	显示文本光标。
Qt::LinksAccessibleByMouse	超链接可以突出显示并激活鼠标复制链接功能。
Qt::TextEditable	支持编辑
Qt::TextEditorInteraction	默认为一个文本编辑器。
Qt::TextBrowserInteraction	默认为一个文本查看器

​ 11.获取QLabel选中的文本

bool hasSelectedText() const //判断是否有选中的文本
QString selectedText() const //返回选中的文本

默认情况下是 QLabel 不支持交互功能，需要通过 setTextInteractionFlags 函数设置 QLabel 的属性支持交互功能。

三、示例：模范qq登录界面设计

我们可以打开QQ登录界面，看一下如何设计的，这里我们就做简单版

1.ui界面设计

2.pro文件

QT       += core gui

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

CONFIG += c++11

# The following define makes your compiler emit warnings if you use
# any Qt feature that has been marked deprecated (the exact warnings
# depend on your compiler). Please consult the documentation of the
# deprecated API in order to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS

# You can also make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0

SOURCES += \
    main.cpp \
    widget.cpp

HEADERS += \
    widget.h

FORMS += \
    widget.ui

# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target

RESOURCES += \
    image.qrc


DISTFILES +=

3.head文件

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private slots:
    void on_pushButton_clicked();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H

4.main.cpp文件

#include "widget.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    w.show();
    return a.exec();
}

5.widget.cpp文件

#include "widget.h"
#include "ui_widget.h"
#include <QLabel>
#include <QLineEdit>
#include <QPicture>
#include <QPixmap>
#include <QMessageBox>
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //设置标签对应的图片
    ui->label_top->setPixmap(QPixmap(":/images/QQ.png"));
    ui->label_top->setScaledContents(true);

    ui->label_head->setPixmap(QPixmap(":/images/hh.jpg"));
    ui->label_head->setScaledContents(true);


    //设置密码显示框
    ui->lineEdit->setEchoMode(QLineEdit::Password);
    //设置选项可编辑属性
    ui->comboBox->setEditable(true);

    //创建账号列表
    QStringList list;
    list<<"12344456"<<"456447894"<<"4561844492";
    //添加显示的账号
    ui->comboBox->addItems(list);
  }

Widget::~Widget()
{
    delete ui;
}


void Widget::on_pushButton_clicked()
{
    QString ps_in;
    ps_in+=tr("账号：");
    ps_in+=ui->comboBox->currentText();
    ps_in+="\n";
    ps_in+=tr("密码：");
    ps_in+=ui->lineEdit->text();
    ps_in+="\n";
    QMessageBox::information(this,tr("登录信息"),ps_in,QMessageBox::Ok);

}

6.widget.ui

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>Widget</class>
 <widget class="QWidget" name="Widget">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>800</width>
    <height>600</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Widget</string>
  </property>
  <widget class="QPushButton" name="pushButton">
   <property name="geometry">
    <rect>
     <x>130</x>
     <y>320</y>
     <width>221</width>
     <height>20</height>
    </rect>
   </property>
   <property name="text">
    <string>登录</string>
   </property>
  </widget>
  <widget class="QLabel" name="label_top">
   <property name="geometry">
    <rect>
     <x>50</x>
     <y>30</y>
     <width>351</width>
     <height>91</height>
    </rect>
   </property>
   <property name="text">
    <string/>
   </property>
  </widget>
  <widget class="QLabel" name="label_head">
   <property name="geometry">
    <rect>
     <x>20</x>
     <y>160</y>
     <width>54</width>
     <height>51</height>
    </rect>
   </property>
   <property name="text">
    <string/>
   </property>
  </widget>
  <widget class="QWidget" name="layoutWidget">
   <property name="geometry">
    <rect>
     <x>280</x>
     <y>140</y>
     <width>71</width>
     <height>91</height>
    </rect>
   </property>
   <layout class="QVBoxLayout" name="verticalLayout">
    <item>
     <widget class="QLabel" name="label">
      <property name="text">
       <string>注册账号</string>
      </property>
     </widget>
    </item>
    <item>
     <widget class="QLabel" name="label_2">
      <property name="text">
       <string>找回密码</string>
      </property>
     </widget>
    </item>
   </layout>
  </widget>
  <widget class="QWidget" name="layoutWidget">
   <property name="geometry">
    <rect>
     <x>110</x>
     <y>140</y>
     <width>171</width>
     <height>91</height>
    </rect>
   </property>
   <layout class="QVBoxLayout" name="verticalLayout_2">
    <item>
     <widget class="QComboBox" name="comboBox"/>
    </item>
    <item>
     <widget class="QLineEdit" name="lineEdit"/>
    </item>
   </layout>
  </widget>
  <widget class="QSplitter" name="splitter">
   <property name="geometry">
    <rect>
     <x>121</x>
     <y>261</y>
     <width>231</width>
     <height>18</height>
    </rect>
   </property>
   <property name="orientation">
    <enum>Qt::Horizontal</enum>
   </property>
   <widget class="QCheckBox" name="checkBox">
    <property name="text">
     <string>记住密码</string>
    </property>
   </widget>
   <widget class="QCheckBox" name="checkBox_2">
    <property name="text">
     <string>自动登录</string>
    </property>
   </widget>
  </widget>
 </widget>
 <resources/>
 <connections/>
</ui>

---