QT学习笔记2 控件QPushButton、QLabel使用方法和案例

QT学习笔记2 控件QPushButton、QLabel使用方法和案例

QPushButton

介绍

在Qt里，最常用的控件就是按钮，有了按钮，就可以点击，从而响应事件。

使用方法

按钮除了可以设置显示文本之外，还可以设置图标，比如在按钮上附上图片等。

• 文本
  可以设置或者获取按钮上显示的文本

//获取和设置按钮上显示的文本
QString text() const
void setText(const QString &text)

• 图标
  可以设置或者获取按钮上的显示的图标

//获取和设置按钮上的图标
QIcon icon() const
void setIcon(const QIcon &icon)

两个属性可以动态通过代码修改，也可以通过ui界面右侧属性栏进行修改（初始界面）
往控件上添加图标方法：

1. 添加资源文件
   

2.文件命名

3. 完成
   

4. 添加前缀
   如图所示：
   

5. 添加文件，选中下好图标文件
   
   如图所示：
   

样式表
样式表可以用来设置控件的文本颜色、背景颜色、边框、字体样式等等，具有很强的可扩展性。

// 获取和设置样式表
// 这是继承自QWidget类的属性和方法
// 只要继承自QWidget类的控件，都有该属性
QString styleSheet() const
void setStyleSheet(const QString &styleSheet)

样式表既可以在 Qt 设计窗口中修改，右击控件即有“修改样式表”选项，也可以在代码中动态地获取和修改。

• 信号
  按钮在按下和松开都会依次发送相应的信号，此类信号也可以被相应的槽函数所接受，以此做出不同的处理。
  
  最常使用的分别是clicked(按下松开)、pressed(按下)、released(松开)。下面的项目案例中会有具体的使用方法。

项目案例

主要项目代码：
第一个启动按钮通过点击可以修改按钮的文字和图标。

void Widget::on_pushButton_Start_clicked()
{
    QString s = ui->pushButton_Start->text();

    if(s == "启动") {
        // 设置文本和字体
        ui->pushButton_Start->setText("停止");
        ui->pushButton_Start->setFont(QFont("黑体", 16));

        // 设置图标和图标大小
        ui->pushButton_Start->setIcon(QIcon(":/icon/stop.ico"));
        ui->pushButton_Start->setIconSize(QSize(50, 50));
    } else {
        ui->pushButton_Start->setText("启动");
        ui->pushButton_Start->setFont(QFont("黑体", 16));

        ui->pushButton_Start->setIcon(QIcon(":/icon/start.ico"));
        ui->pushButton_Start->setIconSize(QSize(50, 50));
    }
}

如上图所示的连接按钮不仅可以改变按钮的文本状态，还可以改变另一个发送指令按钮的使能状态，当点击连接按钮时，连接按钮文本切换为断开连接，进而发送指令按钮切换为打开使能状态，此时发送指令按钮才可以正常使用，如下图所示：

void Widget::on_pushButton_Connect_clicked()
{
    QString s = ui->pushButton_Connect->text();
    if(s == "连接")
    {
        ui->pushButton_Connect->setText("断开连接");
        ui->pushButton_Connect->setFont(QFont("黑体", 16));
        ui->pushButton_Sendcommend->setEnabled(true);
    }
    else
    {
        ui->pushButton_Connect->setText("连接");
        ui->pushButton_Connect->setFont(QFont("黑体", 16));
        ui->pushButton_Sendcommend->setEnabled(false);
    }
}

以下为按钮发送clicked(按下松开)、pressed(按下)、released(松开)信号时，对应的槽函数

void Widget::on_pushButton_Signal_clicked()
{
    qDebug() << "clicked...";
}

void Widget::on_pushButton_Signal_pressed()
{
    qDebug() << "pressed...";
}

void Widget::on_pushButton_Signal_released()
{
    qDebug() << "released...";
}

QLabel

介绍

QLabel标签控件，它的使用范围非常广泛，可用于QT项目的显示边框、设置文字、设置字体、设置信息提示框、状态提示、居中对齐、加载图片、自适应图片大小、设置位置大小、样式表等操作。这些使用案例可参考QT QLabel控件(使用详解)

下图为ui界面中QLabel标签控件所处位置，便于初学者寻找：

使用方法

• 文本
  同按钮控件一样，Qlabel也可以动态设置文本或者获取文本。

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

案例中使用代码如下所示：

void Widget::on_pushButton_GetText_clicked()//获取文本
{
    //QMessageBox->提示框
    QMessageBox::information(this,"标签提示",ui->Label_Time->text());//提示框显示Label_Tim控件里的内容
}

void Widget::on_pushButton_Set_text_clicked()//设置文本
{

    ui->Label_Time->setText(QTime::currentTime().toString());
}

知识扩展：

1. QMessageBox

在上面代码中使用到了QMessageBox::information，其中QMessageBox为提示框类，类似于系统弹窗，如下图所示：

*** QMessageBox::information(this,“标签提示”,ui->Label_Time->text());***
该函数中，两个实参
“标签提示”——即为提示框的名称
ui->Label_Time->text()) ——即为提示框显示的内容，此处为QLabel文本内容

2. QTime
   QTime表示时间数据的类，
   QTime::currentTime().toString()，此次代码表示为，获取当前时间并且把它转换成字符串的形式。

• 对齐方式
  设置标签中的内容具有水平和垂直两个方向上的对齐方式，比如左对齐、右对齐、上对齐、下对齐、水平居中、垂直居中。对齐方式可通过一下函数设置：

// 获取和设置文本的对齐方式
Qt::Alignment alignment() const;
void setAlignment(Qt::Alignment);

其中，Qt::Alignment是一个宏，常用取值如下所示：

• Qt::AlignLeft —— 水平方向——左对齐
• Qt::AlignRight ——水平方向——右对齐
• Qt::AlignHCenter ——水平方向——居中对齐
• Qt::AlignTop ——垂直方向——上对齐
• Qt::AlignBottom ——垂直方向——下对齐
• Qt::AlignVCenter——垂直方向——居中对齐
• Qt::AlignCenter（AlignVCenter | AlignHCenter)——垂直方向和水平方向——居中对齐

该属性都可以通过代码进行动态修改，示例代码如下：

void Widget::on_pushButton_AlignLeft_clicked()//左对齐和垂直方向居中对齐
{
    ui->Label_Align->setAlignment(Qt::AlignLeft | Qt::AlignVCenter);
}

void Widget::on_pushButton_AlignCenter_clicked()//居中对齐
{
    ui->Label_Align->setAlignment(Qt::AlignCenter);
}

void Widget::on_pushButton_AlignRight_clicked()//右对齐和垂直方向居中对齐
{
     ui->Label_Align->setAlignment(Qt::AlignRight | Qt::AlignVCenter);
}

Label_Align为ui界面里的标签控件对象.

• 换行
  使能换行可通过相对应的函数进行控制，

// 获取和设置文本是否允许换行
// 换行时：在 word-breaks处，不会将一个完整的单词显示在两行
bool wordWrap() const; // 判断是否允许换行 
void setWordWrap(bool on); // 设置是否允许换行 

使能换行时，标签处于缩放状态时，那么文字就会处于自动换行。如下图所示：
当前为禁止换行模式下，

当前为允许换行模式下，

换行使能状态可通过两个按钮控件切换，对应的槽函数如下所示：

void Widget::on_pushButton_DisableWrap_clicked()//禁止换行
{
    ui->Label_Wrap->setWordWrap(false);
}

void Widget::on_pushButton_EnableWrap_clicked()//允许换行
{
    ui->Label_Wrap->setWordWrap(true);
}

• 图像
  可以获取和设置标签上显示的图像

// 获取和设置显示的图像
const QPixmap *pixmap() const; 
void setPixmap(const QPixmap &pixmap);

如下图所示，该图片就需要标签控件作为载体去放置

示例代码：

void Widget::on_pushButton_ToggleImage_clicked()//更换图片
{
   static bool flag = true;
   QPixmap px;//创建一个QPixmap类的对象
   if(flag == true)
   {
       flag = false;
       px.load(QString(":/icon/strawberry.ico"));//往对象上加载图片
   }
   else
   {
       flag = true;
        px.load(QString(":/icon/apple.ico"));//往对象上加载图片
   }
   ui->Label_Image->setPixmap(px);
   // 不要缩放，否则拉伸导致失真
   ui->Label_Image->setScaledContents(false);
   ui->Label_Image->setAlignment(Qt::AlignCenter);//使图片居中放置
}

图像扩展：
QPixmap类是一种用作绘制设备的屏幕外图像表现形式
QPixmap类可以使用QLabel或者QAbstractButton的子类之一可以轻松显示在屏幕上
常用函数：

项目案例

在ui界面设计当中，我不仅使用了QLabel和QPushButton两个控件，还使用了QgroupBox(样式表)、Verticlal Layout（水平布局）、Horizontal Layout（垂直布局），三者结合可以使布局更加美观，特别是两个布局控制，如果不使用布局控件，则会拉伸窗口，其中控件不会随着拉伸而变化。
如下图所示：

代码：

#include "widget.h"
#include "ui_widget.h"

#include 
#include 


Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
}

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

void Widget::on_pushButton_GetText_clicked()//获取文本
{
    //QMessageBox->提示框
    QMessageBox::information(this,"标签提示",ui->Label_Time->text());//提示框显示Label_Tim控件里的内容
}

void Widget::on_pushButton_Set_text_clicked()//设置文本
{

    ui->Label_Time->setText(QTime::currentTime().toString());
}

void Widget::on_pushButton_AlignLeft_clicked()//左对齐
{
    ui->Label_Align->setAlignment(Qt::AlignLeft | Qt::AlignVCenter);
}

void Widget::on_pushButton_AlignCenter_clicked()//居中对齐
{
    ui->Label_Align->setAlignment(Qt::AlignCenter);
}

void Widget::on_pushButton_AlignRight_clicked()//右对齐
{
     ui->Label_Align->setAlignment(Qt::AlignRight | Qt::AlignVCenter);
}

void Widget::on_pushButton_DisableWrap_clicked()//禁止换行
{
    ui->Label_Wrap->setWordWrap(false);
}

void Widget::on_pushButton_EnableWrap_clicked()//允许换行
{
    ui->Label_Wrap->setWordWrap(true);
}

void Widget::on_pushButton_ToggleImage_clicked()//更换图片
{
   static bool flag = true;
   QPixmap px;
   if(flag == true)
   {
       flag = false;
       px.load(QString(":/icon/strawberry.ico"));
   }
   else
   {
       flag = true;
        px.load(QString(":/icon/apple.ico"));
   }
   ui->Label_Image->setPixmap(px);
   // 不要缩放，否则拉伸导致失真
   ui->Label_Image->setScaledContents(false);
   ui->Label_Image->setAlignment(Qt::AlignCenter);
}