Qt 基础组件速学 显示组篇display

学习目标： Qt 基础组件复习/速学  显示组控件

前置环境

运行环境:qt creator 4.12

学习内容：

     //标签控件
    Widget::setLabelImg();
    //文本浏览控件
    Widget::setQTextBrowser();
    //显示进度的控件
    Widget::setQProgressBar();
    //显示计数器
    Widget::setLCD();

详细代码和运行测试

 标签label 嵌入img

由于图片太大，我就设置了固定尺寸。

如何把图片资源加入到我的项目中？可参考：

qt creator 添加 图片资源文件_qt creator添加图片-CSDN博客

void Widget::setLabelImg(){
    QLabel* label = new QLabel(this);
    QImage * img = new QImage();
    if(!img->load(":/new/prefix1/C:/Users/jbj/Downloads/Telegram Desktop/IMG_5037.JPG"))
    {
        QMessageBox::warning(nullptr,"失败","图片资源路径有误");
        delete img;
        return ;
    }
    label->setPixmap(QPixmap::fromImage(*img));
    label->setFixedSize(300,300);
    label->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    grid->addWidget(label,0,0);
}

富文本内容显示

富文本(Rich Text)是一种包含格式信息的文本表示方式,它可以包含字体样式、大小、颜色、段落格式、图像、超链接等各种丰富的元素。与纯文本相比,富文本可以提供更加美观和信息丰富的呈现方式。  简单来说就是封装好的，功能强大的文本控件

程序：读取qmake文件并输出到browser控件中，在这个程序中我们没加滚动条，但是browser控件自带了。更多用法则查官网

void Widget::setQTextBrowser(){
    QTextBrowser* browser = new QTextBrowser(this);
    browser->setFixedSize(300,300);
    browser->setAlignment(Qt::AlignCenter);
    QString result;
    QFile f("d:\\VS\\Qtproj\\13-display-widgets\\13-display-widgets.pro");

    if(!(f.open(QIODevice::ReadOnly | QIODevice::Text))){
        QMessageBox::critical(nullptr,"失败","文件错误");
    }

    while (!f.atEnd()) {
        QByteArray data = f.readLine();
        QString temp(data);
        result.append(temp);
    }

    browser->setText(result);
    grid->addWidget(browser,0,1);
}

 进度条

此次我们使用ui界面加入控件，只需点击拖动，修改主要字段：

1. 双击ui文件，进入ui控件加载界面。然后修改必要字段
2. objectName: 我们给控件取的唯一标识符
3. text:显示的文字 比如测试进度条

 

 然后我们编写程序，赋予功能。

void Widget::setQProgressBar(){
    this->ui->probar->setRange(0,100000);
    this->ui->probar->setValue(0);

    connect(this->ui->pb,&QPushButton::clicked,this,[this](){
            for(int i=1;i<=1000000;i++)
           {
               for(int j=0;j<1;j++)
               {
                   this->ui->probar->setValue(i);
               }
           }
    });
}

 

计时器

如进度条，将控件加载并设置主要参数。

void Widget::setLCD(){
    // 设置显示位数
    int * n =new int(0);
    this->ui->plcd->setDigitCount(3);
    this->ui->plcd->display(0);

    connect(this->ui->prestart,&QPushButton::clicked,this,[n,this](){
        *n=0;
        this->ui->plcd->display(*n);
    });

    connect(this->ui->psub,&QPushButton::clicked,this,[n,this](){
        (*n)--;
        this->ui->plcd->display(*n);
    });

    connect(this->ui->padd,&QPushButton::clicked,this,[n,this](){
        (*n)++;
        this->ui->plcd->display(*n);
    });


}

总结：

本次学习显示控件，有丰富的QTextbrowser和图片的显示，以及进度条计时器制作。

最后附上源代码链接

对您有帮助的话，帮忙点个star

13-display-widgets · jbjnb/Qt demo - 码云 - 开源中国 (gitee.com)