【QT（六）】—— 常用控件（三）

文本框 QLabel

属性	说明
text	QLabel 中显示的文本
textFormat	文本的格式，可选值： Qt::PlainText：纯文本； Qt::RichText：富文本（支持 HTML 标签）；Qt::MarkdownText：Markdown 格式-；Qt::AutoText：根据文本内容自动决定格式
pixmap	QLabel 内部包含的图片
scaledContents	是否自动拉伸内容填充 QLabel：true：自动拉伸- false：不自动拉伸
alignment	内容的对齐方式，可设置水平和垂直方向的组合对齐
wordWrap	文本是否自动换行：true：自动换行；false：不自动换行
indent	文本缩进，水平和垂直方向均生效；生效的具体方向取决于 alignment 配置
margin	内部内容与 QLabel 边框之间的边距（上下左右四个方向同时生效），与 indent 功能不同
openExternalLinks	当文本包含 URL 时，是否允许直接打开外部链接
buddy	关联的 "伙伴" 组件，点击 QLabel 时会激活该伙伴（例：伙伴为 QCheckBox 时，点击标签会切换其选中状态）

1. 文本格式

QLabel支持文本格式：纯文本（Qt::TextFormat::PlainText ）、富文本（Qt::TextFormat::RichText ）、markdown文本（Qt::TextFormat::MarkdownText）

cpp 复制代码

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    ui->label_1->setText("纯文本");
    ui->label_1->setTextFormat(Qt::TextFormat::PlainText);

    ui->label_2->setText("<b>富文本</b>");
    ui->label_2->setTextFormat(Qt::TextFormat::RichText);

    ui->label_3->setText("# markdown文本");
    ui->label_3->setTextFormat(Qt::TextFormat::MarkdownText);
}

2. 图片设置

虽然 QLabel是一个文本框控件，但是它也是可以设置图片的。

pixmap ： QLabel内部的图片
scaledContents：自动拉伸（图片会根据文本框的大小自动调整）

相关 API 就非常简单了，setPixmap、setScaledContents

示例：创建一个文本框，使用图片填充，并自动拉伸

这里还是使用qrc文件资源管理，然后使用ui图形化界面创建文本框。

cpp 复制代码

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    ui->label->setPixmap(QPixmap(":/1.jpg"));
    ui->label->setScaledContents(true);
}

这里图片、以及文本框的尺寸我们可能控制不好，当然也可以让文本框铺满整个窗口，然后让图片自动拉伸。

那问题又来了：当我们使用鼠标拖拽窗口大小时，图片（文本框）并不会随着我们的拖拽而改变大小。

这里就设计到事件问题了，这里简单了解一下，后面再详细学习

对于鼠标拖拽这个事件，我们可以重写父类的ResizeEvent方法（void ResizeEvent(QResizeEvent* event)），这样在鼠标拖拽这一事件发生时，就会执行该方法。

cpp 复制代码

 void Widget::resizeEvent(QResizeEvent* event)
{
     QSize size = event->size();
     ui->label->setGeometry(0,0,size.width(),size.height());
     qDebug() << size;
}

这里随着我们拖拽窗口，文本框大小就会自动调整了。

3. 对齐、自动换行、缩进、边距

alignment：文本对齐方式，常见取值：Qt::AlignHCenter(水平方向居中)、Qt::AlignVCenter(垂直方向居中)、Qt::AlignLeft(左对齐)、Qt::AlignRight(右对齐)
wordwrap：自动换行；true表示自动换行、false表示不会自动换行。
indent：文本缩进
margin：文本边距（上下左右方向上的边距）

示例：

对于文本框label_1，设置自动换行

对于文本框label_2，设置文本对齐方式为：Qt::AlignHCenter | Qt::AlignVCenter，水平和垂直方向上都居中

对于文本框label_3，设置文本缩进50

对于文本框label_4，设置文本边距30

cpp 复制代码

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

    ui->label_2->setAlignment(Qt::AlignHCenter | Qt::AlignVCenter);

    ui->label_3->setIndent(50);

    ui->label_4->setMargin(30);
}

文本边距指的是和上下左右四个方向上的边框的距离；

如果设置的边距不合理（超过边框大小），系统就会使用默认值

4. 伙伴

所谓伙伴，简单来说就是这里的文本框可以关联其他的控件，在点击QLabel控件时，就会激活其关联的控件。

示例：

这里创建一个文本框QLabel和一个复选框QCheckBox，并对文本框设置伙伴。

并设置一个快捷键，运行程序按下对应快捷键，此时复选按钮QCheckBox的选中状态就会改变

在文本框中，文本内容&键位会被解析成快捷键：Alt + 对应键位。

关联文本框和复选按钮

cpp 复制代码

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    ui->label_1->setText("选项一 &A");
    ui->label_1->setBuddy(ui->checkBox_1);

    ui->label_2->setText("选项二 &B");
    ui->label_2->setBuddy(ui->checkBox_2);
}

数字显示 QLCDNumber

QLCDNumber是一个显示数字的控件，预期效果：

常见属性：

属性	说明
intvalue	QLCDNumber显示的数字值(int)
value	QLCDNumber显示的数字值(double)（给`value`值`1.5`，`intvalue`就是2）
digitCount	QLCDNumber显示数字的长度
mode	数字的显示格式（进制）`Dec`、`Hex`、`Bin`、`Oct`
segmentStyle	数字的显示风格：`Filled`、`Outline`、`Flat`
smallDecimalPoint	比较小的小数点

QLCD这个控件还是比较简单的。

示例：倒计时

创建一个QLCDNumber控件，设置初始值为10，每隔一秒数字减一，直到0为止。

这里就要使用到一个 QTimer 类，每个1s（1000ms）触发一个timeout信号。

并设置信号关联槽函数，重新设置QLCDNumber控件中的值；当值减到0时就停止。

cpp 复制代码

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    timer = new QTimer(this);
    connect(timer,&QTimer::timeout,this,&Widget::handle);
    // 这里设置QLCDNumber中的数值使用的是display
    ui->lcdNumber->display(10);
    // 启动计时器，每1000ms毫秒触发一次timeout信号
    timer->start(1000);
}

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

void Widget::handle()
{
    int value = ui->lcdNumber->intValue();
    if(value <= 0)
    {
        timer->stop();
        return;
    }
    ui->lcdNumber->display(value - 1);
}

注意：

QLCDNumber 中设置其中的数字使用的接口是display。

日历 QCalendar

QCalendar 表示一个日历，效果如下：

属性	说明
selectedDate	当前选择的日期
minimumDate	最小日期
maximumDate	最大日期
firstDayOfWeek	日历的第一列是周几
gridVisible	表格的边框，`true`显示边框
selectionMode	是否允许选择日期
navigationBarVisible	日历上方是否显示标题(日期)
horizontalHeaderFormat	日历上方显示的日期格式
verticalHeaderFormat	日历第一列显示内容
dateEditEnabled	是否允许被编辑

关于QCalendar，属性也是很简单易懂的（很多默认配置就够用了）

信号：

信号	说明
`selectionChanged(const QDate&)`	当选择日期发送改变时触发
`activated(QDate& )`	双击或者按下回车键时触发（日期要有效）
`currentPageChanged(int,int)`	年份和月份发生改变时触发，参数表示新的年份和月份

对于QCalendar控件，最主要的还是selectedDate属性（当前选择的日期）和selectionChanged信号（选择日期发生改变时触发）

示例：选择日期，并显示出选择的日期

这里还是使用ui图形化界面创建出一个QCalendar Widget控件，然后设置其selectionChanged信号的槽函数：

cpp 复制代码

//对应槽函数
void Widget::on_calendarWidget_selectionChanged()
{
    QDate date = ui->calendarWidget->selectedDate();
    ui->label->setText("当前选择的日期 : " + date.toString());
    qDebug() << date;
}

这样就会随着我们鼠标点击选择日期，更新下方的文字信息。并且日历上方的年份和月份也会随着我们的选择而改变。

进度条 QProgress Bar

QProgressBar控件表示一个进度条，预期效果：

这不过这里的进度条中的进度，只要我们不修改它是不会变的；但是整个进度条部分有一个动态的效果

属性

属性	说明
minimum	最小值
maximum	最大值
value	当前值
alignment	对齐方式
textVisible	进度条中数字是否可见
orientation	进度条方向（水平/垂直）
invertAppearance	是否反方向增长
textDirection	文本朝向
format	数字的格式：`%p`(进度百分比)、`%v`(进度的数值)、`%m`(剩余时间)、`%t`(总时间)

对于这些属性，我们都是可以通过图形化界面来进行设置的：

当然，这个进度条运行起来是不会增涨的，并且在实际开发过程当中，进度条也是随着实际场景动态增长的（例如：下载/安装）

实例：实现进度条动态增长效果

这里就使用QTimer类，每100ms增涨 1来实现一个动态进度条增涨的效果。

cpp 复制代码

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    timer = new QTimer(this);
    connect(timer,&QTimer::timeout,this,&Widget::handle);
    timer->start(100);
}
void Widget::handle()
{
    int value = ui->progressBar->value();
    if(value >= 100)
    {
        timer->stop();
        return;
    }
    ui->progressBar->setValue(value + 1);
}

本篇文章到这里就结束了，感谢支持

我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=2oul0hvapjsws