Qt按钮与标签控件详解

1. 按钮类控件

1.1 Push Button

QPushButton 表示一个按钮，继承自 QAbstractButton（一个抽象类）
属性
- text：按钮中的文本
- icon：按钮中的图标
- iconSize：图标大小
- shortCut：按钮对应的快捷键
- autoRepeat：是否会重复触发。鼠标左键按住不动的话，为true则持续产生鼠标点击事件；false则必须释放鼠标，再次点击鼠标才会触发
- autoRepeatDelay：重复触发的延时时间，按住按钮多久之后，开始重复触发
- autoRepeatInterval：重复触发的周期

1.1.1 给按钮设置图标

1.1.2 给按钮添加快捷键+连发功能

参数时一个 QKeySequence 对象
设置快捷键要在 Widget 的构造函数中完成，程序一启动，快捷键就是有效的
键盘的连发功能默认就是支持的

cpp 复制代码

    // 直接通过按键名字设置，虽然简单但容易写错
    // ui->pushButton_up->setShortcut(QKeySequence("w"));
    // ui->pushButton_left->setShortcut(QKeySequence("a"));
    // ui->pushButton_right->setShortcut(QKeySequence("d"));
    // ui->pushButton_down->setShortcut(QKeySequence("s"));

    // 还可以通过按键的枚举来设置按键快捷键
    // ui->pushButton_up->setShortcut(QKeySequence(Qt::CTRL+Qt::Key_W));   //ctrl+w组合键
    ui->pushButton_up->setShortcut(QKeySequence(Qt::Key_W));
    ui->pushButton_left->setShortcut(QKeySequence(Qt::Key_A));
    ui->pushButton_right->setShortcut(QKeySequence(Qt::Key_D));
    ui->pushButton_down->setShortcut(QKeySequence(Qt::Key_S));

    //开启鼠标点击的连发功能（键盘的连发功能默认就是支持的）
    ui->pushButton_up->setAutoRepeat(true);
    ui->pushButton_down->setAutoRepeat(true);
    ui->pushButton_left->setAutoRepeat(true);
    ui->pushButton_right->setAutoRepeat(true);

1.2 Radio Button

单选按钮，在多个选项中选择一个
属性
- checkable：是否能选中
  - 只是能够让按钮不被选中，仍然可以响应点击事件
  - 想要禁用按钮需要使用setDisabled(true)或setEnabled(false)
- checked：是否已经被选中，checkable时checked的前提
- autoExclusive：是否排他（选中一个按钮后是否会取消其他按钮选中）
  - QRadioButton 默认是排他的

1.2.1 单选按钮+禁用选项

cpp 复制代码

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

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

    // 添加一个默认的选项
    ui->radioButton_male->setCheckable(true);
    ui->label->setText("您选择的性别为：男");

    // 禁用其他选项
    ui->radioButton_other->setCheckable(false); // 无法被选中但是依旧可以响应点击事件
    // ui->radioButton_other->setDisabled(true);
    ui->radioButton_other->setEnabled(false);
}

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

void Widget::on_radioButton_male_clicked()
{
    // 把界面上的 label 的内容进行更新
    ui->label->setText("您选择的性别为：男");
}

void Widget::on_radioButton_female_clicked()
{
    ui->label->setText("您选择的性别为：女");
}

void Widget::on_radioButton_other_clicked()
{
    ui->label->setText("您选择的性别为：其他");
}

1.2.2 toggled状态变化触发信号

cpp 复制代码

void Widget::on_radioButton_clicked(bool checked)
{
    // 此处checked表示了当前radioButton的选中状态
    qDebug()<<"clicked: "<<checked;
}

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

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

void Widget::on_radioButton_4_toggled(bool checked)
{
    // checked 状态发生改变就会触发这个信号
    qDebug()<<"toggled："<<checked;
}

1.2.3 多组单选按钮

各组之间不要影响
QButtonGroup 类，可以针对单选按钮进行分组

1.3 CheckBox

复选按钮
属性
- checkable
- checked
- tristate：三态复选框
  
  void Widget::on_pushButton_clicked()
  {
  QString result="今天你的安排是: ";
  if(ui->checkBox->isChecked()==true)
  result+=ui->checkBox->text();
  if(ui->checkBox_2->isChecked()==true)
  result+=ui->checkBox_2->text();
  if(ui->checkBox_3->isChecked()==true)
  result+=ui->checkBox_3->text();
  ui->label->setText(result);
  }

2. 显示类控件

2.1 Label

属性
- text：QLabel中的文本
- textFormat：文本格式
  - Qt::PlainText 纯文本
  - Qt::RichText 富文本（支持 html 标签）
  - Qt::MarkdownText markdown 格式
  - Qt::AutoText 根据文本内容自动决定文本格式
- pixmap：Qlabel 内部包含的图片
- scaledContents：设为true表示内容自动拉伸填充QLabel，false则不会自动拉伸
- alignment：对齐方式，可以设置水平和垂直方向如何对齐
- wordWrap：设为 true 内部的文本会自动换行，false 则内部文本不会自动换行
- indent：设置文本缩进，水平和垂直方向都生效
- margin：内部文本和边框之间的边距
- openExternalLinks：是否允许打开一个外部的链接
- buddy：给 QLabel 关联一个"伙伴"，点击 QLabel 就能激活对于"伙伴"。比如伙伴如果是⼀个QCheckBox,那么该QCheckBox就会被选中。

2.1.1 QLabel的文本格式

cpp 复制代码

    // 把第一个label设置为显示纯文本
    ui->label->setTextFormat(Qt::PlainText);
    ui->label->setText("<b>这是一段纯文本</b>");

    // 把第二个label设置成显示富文本
    ui->label_2->setTextFormat(Qt::RichText);
    ui->label_2->setText("<b>这是一段富文本</b>"); //加粗

    // 把第三个label设置成显示markdown
    ui->label_3->setTextFormat(Qt::MarkdownText);
    ui->label_3->setText("# 这是markdown文本"); //一级标题

2.1.2 QLabel 设置图片

Qt 中，表示用户的操作，有两类概念：信号和事件
当用户拖拽修改窗口大小的时候，就会连续触发 resize 事件(resizeEvent)
- 每次出发 resizeEvent 就会调用一次对应的虚函数

cpp 复制代码

#include "widget.h"
#include "ui_widget.h"
#include <QDebug>
#include <QResizeEvent>
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 先把QLabel设置成和窗口一样大，并且把这个QLabel左上角设置到窗口的左上角
    // 让整个QLabel铺满整个窗口
    QRect windowRect=this->geometry();
    ui->label->setGeometry(0,0,windowRect.width(),windowRect.height());

    QPixmap pixmap(":/11.png");
    ui->label->setPixmap(pixmap);
    // 图片大小可能小于窗口大小，铺不满->启动自动拉伸
    ui->label->setScaledContents(true); // 这个设置是一次性的，运行起来之后再拉伸就不会跟着变化了

    // 当用户拖拽修改窗口大小的时候，就会连续触发 resize 事件(resizeEvent)
}

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

// 此处的形参event是非常有用的，包含了触发这个resize事件这一时刻，窗口的尺寸的数值
void Widget::resizeEvent(QResizeEvent *event)
{
    qDebug() <<event->size();
    ui->label->setGeometry(0,0,event->size().width(),event->size().height());
}

2.1.3 QLabel设置文本格式

setAlignment
- Qt::AlignHCenter：水平居中
- Qt::AlignVCenter：垂直居中
- Qt::AlignTop：顶部
- Qt::AlignRight：靠右

cpp 复制代码

    // 设置对齐方式
    ui->label->setText("这是一段文本");
    ui->label->setAlignment(Qt::AlignHCenter | Qt::AlignVCenter); //水平居中、垂直居中

    // 设置自动换行
    ui->label_2->setText("这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本");
    ui->label_2->setWordWrap(true); // 自动换行

    // 设置缩进，不仅仅是首行缩进
    ui->label_3->setText("这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本");
    ui->label_3->setWordWrap(true);
    ui->label_3->setIndent(50); // 单位是像素,即使文本换行后续的行也会缩进

    // 设置边距
    ui->label_4->setText("这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本");
    ui->label_3->setWordWrap(true);
    ui->label_4->setMargin(55);

2.1.4 QLabel伙伴

QLabel 中写的文本，是可以指定"快捷键"
- 格式为 &跟上一个字符
- &A =》通过 Alt+A 触发快捷键
绑定了伙伴关系之后，通过快捷键就可以选中对应的单选按钮/复选按钮

cpp 复制代码

    // 设置label和radioButton伙伴关系
    ui->label->setBuddy(ui->radioButton);
    ui->label_2->setBuddy(ui->radioButton_2);

2.2 LCD Number

专门用来显示数字的控件
属性
- intValue：QLCDNumber 显示的数字值（int）
- value：QLDNumber 显示的数字值（double）
  - 和 intValue 是联动的，例如给 value 设为 1.5，intValue 的值就是2
  - 设置 value 和 intValue 的方法名字是 display
- digitCount：显示几位数字
- mode：数字显示格式
  - QLCDNumber::Dec：十进制
  - QLCDNumber::Hex：十六进制
  - QLCDNumber::Bin：二进制
  - QLCDNumber::Oct：八进制
- segmentStyle：设置显示风格
  - QLCDNumber::Flat：平面的显示风格，数字呈现在一个平坦的表面
  - QLCDNumber::Outline：轮廓显示风格，数字具有清晰的轮廓和阴影效果
  - QLCDNumber::Filled：填充显示风格，数字被填充颜色并与背景区分开
- smallDecimalPoint：设置比较小的小数点

2.2.1 定时器实现倒计时

定时器：
- C++中Boost里面提供了对应功能
- Qt 中也封装了对应的定时器，通过 QTimer 创建出来的对象，就会产生一个 timeout 信号，可以通过 start 方法来开启定时器，并且在参数中设定触发 timeout 信号的周期

cpp 复制代码

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

    // 设置一个初始值
    ui->lcdNumber->display(10);

    // 创建一个QTimer实例
    timer=new QTimer(this);
    // 把QTimer的timeout信号和槽函数进行链接
    connect(timer,&QTimer::timeout,this,&Widget::handle);
    // 启动定时器，参数是触发timeout的周期，单位是ms
    timer->start(1000);
}

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

void Widget::handle()
{
    // 拿到LCDNumber中的数字
    int value=ui->lcdNumber->intValue();
    if(value<=0)
    {
        // 数字减到0了，停止定时器
        timer->stop();
        return;
    }
    ui->lcdNumber->display(--value);
}

2.2.2 通过循环实现倒计时

Qt 禁止其他线程直接修改界面
默认情况下，槽函数都是主线程调用的，在槽函数中修改页面是没有任何问题的

cpp 复制代码

    // 无法实现，Qt 禁止其他线程直接修改界面
    std::thread t([this](){
        int value=ui->lcdNumber->intValue();
        while(true)
        {
            // 先休眠1s
            std::this_thread::sleep_for(std::chrono::seconds(1));
            if(value<=0)
            {
                break;
            }
            value-=1;
            ui->lcdNumber->display(value);
        }
    });

2.3 ProgressBar

进度条
属性
- minimum：进度条最小值
- maximum：进度条最大值
- value：进度条当前值
- alignment：文本在进度条中的对齐方式
- textVisible：进度条数字是否可见
- orientation：进度条的方向是水平还是垂直
- invertAppearance：是否是朝反方向增长进度
- textDirection：文本的朝向
- format：展示的数字格式
  - %p：百分比
  - %v：数值
  - %m：剩余事件（单位：毫秒）
  - %t：总时间（单位：毫秒）

2.3.1 进度条

Widget 类的前面已经提供了 QTimer 类的声明，所以可以在 Widget 中声明 QTimer 的指针/引用类型的成员。后续如果真正使用 QTimer（包括创建实例，使用里面的成员...）仍然需要包含 QTimer 头文件
- 主要是解决编译速度的问题
- C++ 编译速度慢，和 #include 头文件，有直接关系。减少 include 就可以有效减少编译事件
- 通过前置声明的方式，Qt中的头文件，每个头文件包含的其他头文件数量都能得到一定的降低

cpp 复制代码

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

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

    timer=new QTimer(this);
    connect(timer,&QTimer::timeout,this,&Widget::handle);
    // 别忘了启动定时器，启动操作要在 connect 之后
    timer->start(100);
}

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

void Widget::handle()
{
    // 获取到进度条的当前数值
    int value=ui->progressBar->value();
    if(value>=100)
    {
        // 进度条满了，就可以停止定时器了
        timer->stop();
        return;
    }
    ui->progressBar->setValue(value+1);
}

2.3.2 红色进度条

QCalendarWidget 表示一个=="日历"==
属性
- selectDate：当前选中的日期
- minimumDate：最小日期
- maximumDate：最大日期
- firstDayOfWeek：每周的第一天（就是日志的第一列）是周几
- gridVisible：是否显示表格的边框
- selectionMode：是否允许选择日期
- navigationBarVisible：日历上方标题是否显示
- horizontalHeaderFormat：日历上方显示的日期格式（水平）
- verticalHeaderFormat：日历第一列显示的内容格式（垂直）
- dateEditEnabled：是否允许日期被编辑

cpp 复制代码

void Widget::on_calendarWidget_selectionChanged()
{
    QDate date=ui->calendarWidget->selectedDate();
    qDebug()<<date;

    ui->label->setText(date.toString());
}

Qt按钮与标签控件详解

1. 按钮类控件

1.1 Push Button

1.1.1 给按钮设置图标

1.1.2 给按钮添加快捷键+连发功能

1.2 Radio Button

1.2.1 单选按钮+禁用选项

1.2.2 toggled状态变化触发信号

1.2.3 多组单选按钮

1.3 CheckBox

2. 显示类控件

2.1 Label

2.1.1 QLabel的文本格式

2.1.2 QLabel 设置图片

2.1.3 QLabel设置文本格式

2.1.4 QLabel伙伴

2.2 LCD Number

2.2.1 定时器实现倒计时

2.2.2 通过循环实现倒计时

2.3 ProgressBar

2.3.1 进度条

2.3.2 红色进度条

2.4 Calendar Widget