正点原子QT之显示窗口部件

6 显示窗口部件

概述（10个）

（1） Label:标签
（2） Text Browser:文本浏览器
（3） Graphics View:图形视图
（4） Calendar Widget:日历
（5） LCD Number:液晶数字
（6） Progress Bar:进度条
（7） Horizontal Line:水平线
（8） Vertial Line:垂直线
（9） OpenGL Widget:开放式图形库工具
（10） QQuick Widget:嵌入式 QML 工具

6.1 Label:标签

QLabel提供了一种用于文本或图像显示的小部件，在前4.1与4.2某些小节已经出现过 Label控件，只用了它显示文本，其实它还可以用于显示图像。

案例：标签显示图像或文本

例 22_qlbel 标签显示图像或文本（难度简单）

cpp

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    /* 设置大小与位置 */
    this->setGeometry(0, 0, 800, 480);

    /* 使用资源里的文件时格式是  :+前缀+文件路径  */
    QPixmap pixmap(":images/openedv.png");

    labelImage = new QLabel(this);

    /* 标签大小为452×132,根据图像的大小来设置 */
    labelImage->setGeometry(180, 150, 452, 132);
    /* 设置图像 */
    labelImage->setPixmap(pixmap);
    /* 开启允许缩放填充 */
    labelImage->setScaledContents(true);

    labelString = new QLabel(this);
    labelString->setText("标签演示文本");
    labelString->setGeometry(300, 300, 100, 20);
}

MainWindow::~MainWindow()
{
}

6.2 Text Browser:文本浏览器

QTextBrowser 继承 QTextEdit，QTextBrowser 类提供了一个具有超文本导航的文本浏览器。该类扩展了 QTextEdit(在只读模式下)，添加了一些导航功能，以便用户可以跟踪超文本文档中的链接。

案例：

例 27_qtextbrowser，简单的文本浏览器（难度：简单），本例设计一个文本浏览器程序，可以打开并显示 txt、 html 等文件。

cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"
/* 窗口对话框与文本流 */
#include <QFileDialog>
#include <QTextStream>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    /* 设置主窗体位置与大小 */
    this->setGeometry(0, 0, 800, 480);

    /* 将窗口标题设置为文本浏览器 */
    this->setWindowTitle("文本浏览器");

    /* 实例化 */
    textBrowser = new QTextBrowser(this);
    /* 将文本浏览器窗口居中 */
    this->setCentralWidget(textBrowser);

    /* 实例化 */
    openAction = new QAction("打开",this);
    /* ui窗口自带有menubar(菜单栏)、mainToolbar（工具栏）与
     * statusbar（状态栏）
     * menuBar是ui生成工程就有的，所以可以在menubar里添加
     * 我们的QActiont等，如果不需要menubar，可以在ui设计
     * 窗口里，在右则对象里把menubar删除，再自己重新定义自己的
     * 菜单栏
     */
    /* 将动作添加到菜单栏 */
    ui->menubar->addAction(openAction);

    /* 信号槽连接 */
    connect(openAction, SIGNAL(triggered()),
            this, SLOT(openActionTriggered()));

}

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

void MainWindow::openActionTriggered()
{
    /* 调用系统打开文件窗口，过滤文件名 */
    QString fileName = QFileDialog::getOpenFileName(
                this,tr("打开文件"),"",
                tr("Files(*.txt *.cpp *.h *.html *.htm)")
                );
    QFile myFile(fileName);
    /* 以只读、文本方式打开，若打开失败，则返回 */
    if(!myFile.open(QIODevice::ReadOnly | QIODevice::Text))
        return;

    /* 用QTextStream对象接收 */
    QTextStream in (&myFile);

    /* 读取全部数据 */
    QString myText = in.readAll();

    /* 判断打开文件的后缀，如果是html格式的则设置文本浏览器为html格式 */
    if(fileName.endsWith("html") || fileName.endsWith("htm")){
        textBrowser->setHtml(myText);
    } else {
        textBrowser->setPlainText(myText);
    }

    /* ui窗口自带有statusbar（状态栏），设置打开的文件名 */
    ui->statusbar->showMessage("文件名：" + fileName);
}

6.3 Graphics View:图形视图

QGraphicsView 继承 QAbstractScrollArea。 QGraphicsView 是图形视图框架的一部分，它提供了基于图元的模型/视图编程。QGraphicsView 在可滚动视图中可视化 QGraphicsScene 的内容。要创建带有几何项的场景，请参阅 QGraphicsScene 的文档。

案例：设计一个图像浏览器

例 28_qgraphicsview，简单的图像浏览器（难度：简单），本例设计一个图像浏览器程序，在上一节一的基础上，将它改变为图像浏览器。

菜单栏点击打开后，系统默认是打开的最近打开的位置，选择任意一个可打开的图片

cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QFileDialog>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    /* 设置主窗体大小 */

    this->setGeometry(0, 0, 800, 480);
    /* 将窗口标题设置为图像浏览器 */
    this->setWindowTitle("图像浏览器");

    /* 实例化图形视图对象 */
    graphicsView = new QGraphicsView(this);
    /* 将图像浏览器窗口居中 */
    this->setCentralWidget(graphicsView);

    /* 实例化场景对象 */
    graphicsScene = new QGraphicsScene(this);

    /* 在QGraphicsView设置场景 */
    graphicsView->setScene(graphicsScene);

    /* 将动作添加到菜单栏 */
    openAction = new QAction("打开",this);
    ui->menubar->addAction(openAction);

    /* 信号槽连接 */
    connect(openAction, SIGNAL(triggered()),
            this, SLOT(openActionTriggered()));
}

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

void MainWindow::openActionTriggered()
{
    /*调用系统打开文件窗口，设置窗口标题为“打开文件”，过滤文件名*/
    QString fileName = QFileDialog::getOpenFileName(
                this,tr("打开文件"), "",
                tr("Files(*.png *.jpg *.bmp)")
                );
    /* 定义QPixmap对象，指向fileName */
    QPixmap image(fileName);
    /* 将image用scaled来重新设置长宽为graphicsView的长宽，
     * 保持纵横比等
     */

    /* 假若用户没选择文件，则返回 */
    if(image.isNull())
        return;
    image = image.scaled(graphicsView->width(),
                          graphicsView->height(),
                          Qt::KeepAspectRatio,
                          Qt::FastTransformation
                          );
    /* 在添加场景内容前，先清除之前的场景内容 */
    graphicsScene->clear();
    /* 添加场景内容image */
    graphicsScene->addPixmap(image);
    /* ui窗口自带有statusBar（状态栏），设置打开的文件名 */
    ui->statusbar->showMessage("文件名：" + fileName);
}

QCalendarWidget 继承 QWidget。 QCalendarWidget 类提供了一个基于月的日历小部件，允许用户选择日期。 CalendarWidget 小部件是用当前月份和年份初始化的， QCalendarWidget 还提供了几个公共插槽来更改显示的年份和月份。

案例：日历简单的使用

例 23_qcalendarwidget 日历简单的使用（难度：简单），本例只是简单的使用日历控件来达到一定的效果。使用一个 CalendarWidget 控件，一个 Label 来显示当前日历所选择的日期，一个 pushButton 按钮，点击 pushButton 按钮来回到当前系统的日期。

cpp

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    /* 设置位置与大小，下同 */
    this->setGeometry(0, 0, 800, 480);

    /* 对象实例化设置显示的位置与大小 */
    calendarWidget = new QCalendarWidget(this);
    calendarWidget->setGeometry(200, 20, 400, 300);

    QFont font;
    /* 设置日历里字体的大小为10像素 */
    font.setPixelSize(10);
    calendarWidget->setFont(font);

    /* 对象实例化设置显示的位置与大小 */
    pushButton = new QPushButton("回到当前日期",this);
    pushButton->setGeometry(200, 350, 100, 30);

    /* 对象实例化设置显示的位置与大小 */
    label = new QLabel(this);
    label->setGeometry(400, 350, 400, 30);
    QString str = "当前选择的日期:"
            + calendarWidget->selectedDate().toString();
    label->setText(str);

    /* 信号槽连接 */
    connect(calendarWidget, SIGNAL(selectionChanged()),
            this, SLOT(calendarWidgetSelectionChanged()));
    connect(pushButton, SIGNAL(clicked()),
            this, SLOT(pushButtonClicked()));
}

MainWindow::~MainWindow()
{
}

void MainWindow::calendarWidgetSelectionChanged()
{
    /* 当日历点击改变当前选择的期时，更新Label的显示内容 */
    QString str = "当前选择的日期:"
            + calendarWidget->selectedDate().toString();
    label->setText(str);
}

void MainWindow::pushButtonClicked()
{
    /* 设置当前选定的日期为系统的QDate */
    calendarWidget->setSelectedDate(QDate::currentDate());
}

6.5 LCD Number:液晶数字

QLCDNumber 继承 QFrame。 QLCDNumber 小部件显示一个类似于 lcd 的数字。 QLCDNumber 小部件可以显示任意大小的数字。它可以显示十进制、十六进制、八进制或二进制数字。使用 display()插槽很容易连接到数据源，该插槽被重载以接受五种参数类型中的任何一种。

案例：

例 24_qlcdnumber， LCDNumber 时钟（难度：简单），使用一个 LCDNumber 控件作时钟的显示，一个定时器定时更新 LCDNumber 的时间。

cpp

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    /* 设置主窗体的大小与位置 */
    this->setGeometry(0, 0, 800, 480);

    /* 实例化与设置显示的位置大小*/
    lcdNumber = new QLCDNumber(this);
    lcdNumber->setGeometry(300, 200, 200, 50);

    /* 设置显示的位数8位 */
    lcdNumber->setDigitCount(8);
    /* 设置样式 */
    lcdNumber->setSegmentStyle(QLCDNumber::Flat);

    /* 设置lcd显示为当前系统时间 */
    QTime time = QTime::currentTime();

    /* 设置显示的样式 */
    lcdNumber->display(time.toString("hh:mm:ss"));

    timer = new QTimer(this);
    /* 设置定时器1000毫秒发送一个timeout()信号 */
    timer->start(1000);

    /* 信号槽连接 */
    connect(timer, SIGNAL(timeout()), this,
            SLOT(timerTimeOut()));

}

MainWindow::~MainWindow()
{
}

void MainWindow::timerTimeOut()
{
    /* 当定时器计时1000毫秒后，刷新lcd显示当前系统时间 */
    QTime time = QTime::currentTime();
    /* 设置显示的样式 */
    lcdNumber->display(time.toString("hh:mm:ss"));
}

6.6 Progress Bar:进度条

QProgressBar 继承 QWidget。 QProgressBar 小部件提供了一个水平或垂直的进度条。进度条用于向用户显示操作的进度，并向他们确认应用程序仍在运行。

案例：模拟手机电池充电

例 25_qprogressbar，手机电池充电。用一个 QProgressBar 模拟手机电池充电。

cpp

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    /* 设置主窗体位置与大小 */
    this->setGeometry(0, 0, 800, 480);

    progressBar = new QProgressBar(this);
    progressBar->setGeometry(300, 200, 200, 60);

    /*样式表设置，常用使用setStyleSheet来设置样式（实现界面美化的功能），
     * 具体可参考seTyleSheet */
    progressBar->setStyleSheet (
                "QProgressBar{border:8px solid #FFFFFF;"
                "height:30;"
                "border-image:url(:/images/battery.png);" //背景图片
                "text-align:center;"    // 文字居中
                "color:rgb(255,0,255);"
                "font:20px;"      // 字体大小为20px
                "border-radius:10px;}"
                "QProgressBar::chunk{"
                "border-radius:5px;" // 斑马线圆角
                "border:1px solid black;" // 黑边，默认无边
                "background-color:skyblue;"
                "width:10px;margin:1px;}" // 宽度和间距
                );

    /* 设置progressBar的范围值 */
    progressBar->setRange(0, 100);
    /* 初始化value为0 */
    value = 0;
    /* 给progressBar设置当前值 */
    progressBar->setValue(value);
    /* 设置当前文本字符串的显示格式 */
    progressBar->setFormat("充电中%p%");

    /* 定时器实例化设置每100ms发送一个timeout信号 */
    timer = new QTimer(this);
    timer->start(100);

    /* 信号槽连接 */
    connect(timer, SIGNAL(timeout()),
            this, SLOT(timerTimeOut()));
}

MainWindow::~MainWindow()
{
}

void MainWindow::timerTimeOut()
{
    /* 定显示器时间到，value值自加一 */
    value ++;
    progressBar->setValue(value);
    /* 若value值大于100，令value再回到0 */
    if(value>100)
        value = 0;
}

6.7 QFrame

QFrame 继承 QWidget。 QFrame 类是有框架的窗口部件的基类，它绘制框架并且调用一个虚函数 drawContents()来填充这个框架。这个函数是被子类重新实现的。这里至少还有两个有用的函数： drawFrame()和 frameChanged()

案例：水平/垂直线

cpp

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    /* 设置主窗体的显示位置与大小 */
    this->setGeometry(0, 0, 800, 480);

    /* 实例化 */
    hline = new QFrame(this);
    /* 确定起始点，设置长和宽，绘制距形 */
    hline->setGeometry(QRect(200, 100, 400, 40));

    /* 设置框架样式为Hline，水平，可设置为其他样式例如Box，
     * 由于是样式选择HLine，所以只显示一条水平直线
     */
    hline->setFrameShape(QFrame::HLine);
    /* 绘制阴影 */
    hline->setFrameShadow(QFrame::Sunken);

    /* 实例化 */
    vline = new QFrame(this);
    /* 确定起始点，设置长和宽，绘制距形 */
    vline->setGeometry(QRect(300, 100, 2, 200));

    /* 设置框架样式为Vline，垂直，可设置为其他样式例如Box，
     * 由于是样式选择Vline，所以只显示一条垂直直线
     */
    vline->setFrameShape(QFrame::VLine);
    /* 绘制阴影 */
    vline->setFrameShadow(QFrame::Sunken);
}

MainWindow::~MainWindow()
{
}

正点原子QT之显示窗口部件 ​

6 显示窗口部件 ​

概述 （10个） ​

6.1 Label:标签 ​

案例：标签显示图像或文本 ​

6.2 Text Browser:文本浏览器 ​

案例： ​

6.3 Graphics View:图形视图 ​

案例：设计一个图像浏览器 ​

6.4 Calendar Widget:日历 ​

案例：日历简单的使用 ​

6.5 LCD Number:液晶数字 ​