Qt6教程之二(8) Display Widgets

 Qt的强大之处是能做出非常炫酷交互界面,同时还能支持不同的操作系统,在运行效率上面也非常高效,那么炫酷的交互界面是要以显示控件为基础的,下面将分别介绍10个显示控件。

1、label   可以显示字体、图片、动画,同时还支持各种样式的定制;

2、text browser  是一个富文本浏览器,只支持内容浏览但是不支持编辑内容;

3、graphics view  是一个绘图架构,基于视图项的模型视图结构,与之相关的有三个类:场景类、视图类,场景项类。

4、calendar widget 是一个日历显示控件,主要用于日历的选择;

5、LCD number 是一个LCD显示控件,主要用于展示内容较少数据,如时间,计数等;

6、progress bar 是一个进度条,用于展示某项任务的处理进度;

7、horizontal line  是水平分割线,vertical line 是垂直分割线,一般用于分割件;

8、openGL widget  是一个将OpenGL显示的图形集成到Qt 应用程序的功能控件,如openGL的图集及3D模型;

9、QQuick widget  是一个用于将 qml 实现的窗口界面嵌入 QWidget 的控件;

下面开始演示代码:

1、label  

main.cpp

#include "mainwindow.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();
    return a.exec();
}

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
};
#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include<QLabel>
#include <QMovie>
#include <QPixmap>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    resize(800,800);
    setWindowTitle("label");

    QLabel *textLink=new QLabel(this);
    textLink->setGeometry(100,30,200,60);
    textLink->setText("<h1><a href=\"https://www.baidu.com\">百度一下</a></h1>");
    textLink->setOpenExternalLinks(true); //open link


    QLabel *image=new QLabel(this);
    image->setGeometry(100,120,200,200);
    QPixmap pixmap;
    pixmap.load("/opt/vnote.png");
    pixmap.scaled(200, 200, Qt::KeepAspectRatioByExpanding, Qt::SmoothTransformation);
    image->setPixmap(pixmap);

    QLabel *gif=new QLabel(this);
    gif->setGeometry(100,400,300,300);
    QMovie *movie = new QMovie("/opt/a.gif");
    movie->setScaledSize(QSize(200, 200));
    gif->setMovie(movie);
    movie->start();


}

MainWindow::~MainWindow()
{
}

运行效果:

2、text browser

main.cpp

#include "mainwindow.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();
    return a.exec();
}

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include<QTextBrowser>

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    QTextBrowser *browser;
};
#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"


MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    setGeometry(100,100,1200,1200);
    setWindowTitle("text browser");

    browser=new QTextBrowser(this);
    browser->setGeometry(100,100,800,800);

    for (int var = 0; var < 10000; ++var) {
        browser->append("append,append,append,appendappendappendappend,append,append,append,append,append");
    }

    for (int var = 0; var < 100; ++var) {
        browser->insertPlainText("insertPlainText,insertPlainText,insertPlainText,insertPlainText,insertPlainText");
    }

    
}

MainWindow::~MainWindow()
{
}

运行效果:

3、graphics view

这里只是简单进行示范,graphics view是一个非常强大的绘图框架,涉及到的知识点非常多!

但是其底层原理却非常简单:  场景里面包含物体,视图有选择性地显示场景中的各种物体。

其他高难度的编程尝试留给各位吧。

main.cpp

#include "mainwindow.h"

#include <QApplication>
#include <QGraphicsRectItem>
#include<QGraphicsView>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    //MainWindow w;
    //w.show();

    QGraphicsScene scene;
    scene.setBackgroundBrush(Qt::blue);

    QPen pen;
    pen.setColor( QColor( 0,130,200) );
    pen.setWidth(10);

    QGraphicsRectItem *rectItem=new QGraphicsRectItem();
    rectItem->setRect(10,10,60,60);
    rectItem->setPen(pen);
    rectItem->setBrush(QBrush(QColor(255,3,254)));
    rectItem->setFlag(QGraphicsItem::ItemIsMovable);

    scene.addItem(rectItem);

    QGraphicsView view(&scene);
    view.resize(1000,800);
    view.show();

    return a.exec();
}

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
};
#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    resize(300,400);
    setWindowTitle("graphics view");


}

MainWindow::~MainWindow()
{
}

运行效果:

4、calendar widget

main.cpp

#include "mainwindow.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();
    return a.exec();
}

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QCalendarWidget>
#include <QLabel>
#include <QMainWindow>

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    QCalendarWidget *calendar;
    QLabel *label;

private slots:
    void calendarDate(QDate date);
};
#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include<QCalendarWidget>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    setGeometry(100,100,900,800);
    setWindowTitle("calendar widget");

    calendar=new QCalendarWidget(this);
    calendar->setGeometry(0,100,400,400);


    label=new QLabel(this);
    label->setGeometry(100,600,500,30);
    label->setText("you do,t select date");

    connect(calendar,SIGNAL(clicked(QDate)),this,SLOT(calendarDate(QDate)));
}

MainWindow::~MainWindow()
{
}

void MainWindow::calendarDate(QDate date)
{
  label->setText("you select date is: "+QString::number(date.year())+"-"+QString::number(date.month())+"-"+QString::number(date.day()));
}

运行效果:

5、LCD number

main.cpp

#include "mainwindow.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();
    return a.exec();
}

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QLCDNumber>
#include <QMainWindow>

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    QLCDNumber *lcd;
    QDateTime *date;
    QTimer *timer;

private slots:
    void OnTimeOut();
};
#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include <QDate>
#include <QDateTime>
#include<QLCDNumber>
#include <QTimer>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    setGeometry(100,100,1000,900);
    setWindowTitle("LCD Number");

    lcd=new QLCDNumber(this);
    lcd->setGeometry(100,100,600,60);
    lcd->setDigitCount(30);
    lcd->setMode(QLCDNumber::Dec);

//    date=new QDateTime(QDateTime::currentDateTime());
//    lcd->display(date->toString("yyyy-MM-dd HH:mm:ss.zzz"));

    lcd->setSegmentStyle(QLCDNumber::Flat);
    lcd->setStyleSheet("border: 2px solid green; color: green; background: silver;");


    timer=new QTimer(this);
    timer->setInterval(1000);


    connect(timer,SIGNAL(timeout()),this,SLOT(OnTimeOut()));
    timer->start();
}

MainWindow::~MainWindow()
{
}

void MainWindow::OnTimeOut()
{
    // 获取系统当前时间
        QDateTime dateTime = QDateTime::currentDateTime();
        // 显示的内容
        lcd->display(dateTime.toString("yyyy-MM-dd HH:mm:ss.zzz"));

}

运行效果:

6、progress bar

main.cpp

#include "mainwindow.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();
    return a.exec();
}

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include<QProgressBar>
#include<QTimer>
#include<QLabel>

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    QProgressBar *progress;
    QTimer *timer;
    QLabel *label;

private slots:
    void onTimeOut();

};
#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    setGeometry(100,100,800,800);
    setWindowTitle("progress bar");

    progress=new QProgressBar(this);
    progress->setGeometry(100,100,800,30);
    progress->setRange(0,100);
    progress->setOrientation(Qt::Horizontal);
    progress->setValue(0);
    progress->setTextVisible(true);
    progress->setFormat("finish progress : %p%");

    timer=new QTimer(this);
    timer->start(100);

    label=new QLabel("finish progress : %"+QString::number(progress->value()),this);
    label->setGeometry(100,300,400,40);

    connect(timer,SIGNAL(timeout()),this,SLOT(onTimeOut()));
}

MainWindow::~MainWindow()
{
}

void MainWindow::onTimeOut()
{
    int value=progress->value();
    value++;
    if(value==100)
    {progress->reset();
    }
    else {
        progress->setValue(value);
        label->setText("finish progress : %"+QString::number(progress->value()));
    }


}

运行效果:

7、horizontal line 与  vertical line

main.cpp

#include "mainwindow.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();
    return a.exec();
}

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
};
#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include <QFrame>
#include <QGridLayout>
#include <QLabel>
#include<QLine>



MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    setGeometry(100,100,800,800);
    setWindowTitle("line");




    QLabel *m_title = new QLabel(tr("label 1"),this);
    m_title->setGeometry(100,100,200,40);

    //horizontalLine
   QFrame *horizontalLine = new QFrame(this);
   horizontalLine->setFrameShape(QFrame::HLine);
   horizontalLine->setFrameShadow(QFrame::Plain);
   horizontalLine->setGeometry(0,200,500,20);

   //VerticalLine
   QFrame *VerticalLine = new QFrame(this);
   VerticalLine->setFrameShape(QFrame::VLine);
   VerticalLine->setFrameShadow(QFrame::Plain);
   VerticalLine->setGeometry(200,00,20,500);


    m_title = new QLabel(tr("label 2"),this);
     m_title->setGeometry(100,300,200,40);

}

MainWindow::~MainWindow()
{
}

运行效果:

8、openGL widget

openGL Widget 涉及的知识非常多,博主也不精通,如下代码来自Qt官方示例,openGL的大师请直接跳过!

main.cpp


#include "openglwindow.h"

#include <QGuiApplication>
#include <QMatrix4x4>
#include <QOpenGLShaderProgram>
#include <QScreen>
#include <QtMath>


//! [1]
class TriangleWindow : public OpenGLWindow
{
public:
    using OpenGLWindow::OpenGLWindow;

    void initialize() override;
    void render() override;

private:
    GLint m_posAttr = 0;
    GLint m_colAttr = 0;
    GLint m_matrixUniform = 0;

    QOpenGLShaderProgram *m_program = nullptr;
    int m_frame = 0;
};
//! [1]

//! [2]
int main(int argc, char **argv)
{
    QGuiApplication app(argc, argv);

    QSurfaceFormat format;
    format.setSamples(16);

    TriangleWindow window;
    window.setFormat(format);
    window.resize(640, 480);
    window.show();

    window.setAnimating(true);

    return app.exec();
}

static const char *vertexShaderSource =
    "attribute highp vec4 posAttr;\n"
    "attribute lowp vec4 colAttr;\n"
    "varying lowp vec4 col;\n"
    "uniform highp mat4 matrix;\n"
    "void main() {\n"
    "   col = colAttr;\n"
    "   gl_Position = matrix * posAttr;\n"
    "}\n";

static const char *fragmentShaderSource =
    "varying lowp vec4 col;\n"
    "void main() {\n"
    "   gl_FragColor = col;\n"
    "}\n";
//! [3]

//! [4]
void TriangleWindow::initialize()
{
    m_program = new QOpenGLShaderProgram(this);
    m_program->addShaderFromSourceCode(QOpenGLShader::Vertex, vertexShaderSource);
    m_program->addShaderFromSourceCode(QOpenGLShader::Fragment, fragmentShaderSource);
    m_program->link();
    m_posAttr = m_program->attributeLocation("posAttr");
    Q_ASSERT(m_posAttr != -1);
    m_colAttr = m_program->attributeLocation("colAttr");
    Q_ASSERT(m_colAttr != -1);
    m_matrixUniform = m_program->uniformLocation("matrix");
    Q_ASSERT(m_matrixUniform != -1);
}
//! [4]

//! [5]
void TriangleWindow::render()
{
    const qreal retinaScale = devicePixelRatio();
    glViewport(0, 0, width() * retinaScale, height() * retinaScale);

    glClear(GL_COLOR_BUFFER_BIT);

    m_program->bind();

    QMatrix4x4 matrix;
    matrix.perspective(60.0f, 4.0f / 3.0f, 0.1f, 100.0f);
    matrix.translate(0, 0, -2);
    matrix.rotate(100.0f * m_frame / screen()->refreshRate(), 0, 1, 0);

    m_program->setUniformValue(m_matrixUniform, matrix);

    static const GLfloat vertices[] = {
         0.0f,  0.707f,
        -0.5f, -0.5f,
         0.5f, -0.5f
    };

    static const GLfloat colors[] = {
        1.0f, 0.0f, 0.0f,
        0.0f, 1.0f, 0.0f,
        0.0f, 0.0f, 1.0f
    };

    glVertexAttribPointer(m_posAttr, 2, GL_FLOAT, GL_FALSE, 0, vertices);
    glVertexAttribPointer(m_colAttr, 3, GL_FLOAT, GL_FALSE, 0, colors);

    glEnableVertexAttribArray(m_posAttr);
    glEnableVertexAttribArray(m_colAttr);

    glDrawArrays(GL_TRIANGLES, 0, 3);

    glDisableVertexAttribArray(m_colAttr);
    glDisableVertexAttribArray(m_posAttr);

    m_program->release();

    ++m_frame;
}
//! [5]

OpenGLWindow.h


#include <QWindow>
#include <QOpenGLFunctions>

QT_BEGIN_NAMESPACE
class QPainter;
class QOpenGLContext;
class QOpenGLPaintDevice;
QT_END_NAMESPACE

//! [1]
class OpenGLWindow : public QWindow, protected QOpenGLFunctions
{
    Q_OBJECT
public:
    explicit OpenGLWindow(QWindow *parent = nullptr);
    ~OpenGLWindow();

    virtual void render(QPainter *painter);
    virtual void render();

    virtual void initialize();

    void setAnimating(bool animating);

public slots:
    void renderLater();
    void renderNow();

protected:
    bool event(QEvent *event) override;

    void exposeEvent(QExposeEvent *event) override;

private:
    bool m_animating = false;

    QOpenGLContext *m_context = nullptr;
    QOpenGLPaintDevice *m_device = nullptr;
};
//! [1]

OpenGLWindow.cpp


#include "openglwindow.h"

#include <QOpenGLContext>
#include <QOpenGLPaintDevice>
#include <QPainter>

//! [1]
OpenGLWindow::OpenGLWindow(QWindow *parent)
    : QWindow(parent)
{
    setSurfaceType(QWindow::OpenGLSurface);
}
//! [1]

OpenGLWindow::~OpenGLWindow()
{
    delete m_device;
}
//! [2]
void OpenGLWindow::render(QPainter *painter)
{
    Q_UNUSED(painter);
}

void OpenGLWindow::initialize()
{
}

void OpenGLWindow::render()
{
    if (!m_device)
        m_device = new QOpenGLPaintDevice;

    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT | GL_STENCIL_BUFFER_BIT);

    m_device->setSize(size() * devicePixelRatio());
    m_device->setDevicePixelRatio(devicePixelRatio());

    QPainter painter(m_device);
    render(&painter);
}
//! [2]

//! [3]
void OpenGLWindow::renderLater()
{
    requestUpdate();
}

bool OpenGLWindow::event(QEvent *event)
{
    switch (event->type()) {
    case QEvent::UpdateRequest:
        renderNow();
        return true;
    default:
        return QWindow::event(event);
    }
}

void OpenGLWindow::exposeEvent(QExposeEvent *event)
{
    Q_UNUSED(event);

    if (isExposed())
        renderNow();
}
//! [3]

//! [4]
void OpenGLWindow::renderNow()
{
    if (!isExposed())
        return;

    bool needsInitialize = false;

    if (!m_context) {
        m_context = new QOpenGLContext(this);
        m_context->setFormat(requestedFormat());
        m_context->create();

        needsInitialize = true;
    }

    m_context->makeCurrent(this);

    if (needsInitialize) {
        initializeOpenGLFunctions();
        initialize();
    }

    render();

    m_context->swapBuffers(this);

    if (m_animating)
        renderLater();
}
//! [4]

//! [5]
void OpenGLWindow::setAnimating(bool animating)
{
    m_animating = animating;

    if (animating)
        renderLater();
}
//! [5]

运行效果:

9、QQuick widgets

main.cpp

#include "mainwindow.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();
    return a.exec();
}

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
};
#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include<QQuickWidget>
#include<QQmlContext>
#include <QQuickItem>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    setGeometry(100,100,800,800);
    setWindowTitle("quick widgets");

    QQuickWidget *widget=new QQuickWidget(this);
    widget->setGeometry(200,200,500,500);

    widget->setSource(QUrl("qrc:myQML.qml"));

//    widget->rootContext()->setContextProperty("width",500);
//    widget->rootContext()->setContextProperty("height",500);

//    QQuickItem *obj = widget->rootObject();
//    int height=obj->height();
//    int width=obj->width();


}

MainWindow::~MainWindow()
{
}

CMakeLists.txt

cmake_minimum_required(VERSION 3.5)

project(test_QQuickWidgets VERSION 0.1 LANGUAGES CXX)

set(CMAKE_AUTOUIC ON)
set(CMAKE_AUTOMOC ON)
set(CMAKE_AUTORCC ON)

set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON)

find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Widgets)
find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Widgets)
find_package(Qt6 COMPONENTS QuickWidgets REQUIRED)


set(PROJECT_SOURCES
        main.cpp
        mainwindow.cpp
        mainwindow.h
        textQML.qrc
)

if(${QT_VERSION_MAJOR} GREATER_EQUAL 6)
    qt_add_executable(test_QQuickWidgets
        MANUAL_FINALIZATION
        ${PROJECT_SOURCES}
    )
# Define target properties for Android with Qt 6 as:
#    set_property(TARGET test_QQuickWidgets APPEND PROPERTY QT_ANDROID_PACKAGE_SOURCE_DIR
#                 ${CMAKE_CURRENT_SOURCE_DIR}/android)
# For more information, see https://doc.qt.io/qt-6/qt-add-executable.html#target-creation
else()
    if(ANDROID)
        add_library(test_QQuickWidgets SHARED
            ${PROJECT_SOURCES}
        )
# Define properties for Android with Qt 5 after find_package() calls as:
#    set(ANDROID_PACKAGE_SOURCE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/android")
    else()
        add_executable(test_QQuickWidgets
            ${PROJECT_SOURCES}
        )
    endif()
endif()

target_link_libraries(test_QQuickWidgets PRIVATE Qt${QT_VERSION_MAJOR}::Widgets)
target_link_libraries(test_QQuickWidgets PRIVATE Qt6::QuickWidgets)

set_target_properties(test_QQuickWidgets PROPERTIES
    MACOSX_BUNDLE_GUI_IDENTIFIER my.example.com
    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
    MACOSX_BUNDLE TRUE
    WIN32_EXECUTABLE TRUE
)

install(TARGETS test_QQuickWidgets
    BUNDLE DESTINATION .
    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR})

if(QT_VERSION_MAJOR EQUAL 6)
    qt_finalize_executable(test_QQuickWidgets)
endif()

myQML.qml

import QtQuick 2.15

Rectangle {
   width: 100
   height: 200
   color: "#f00"
}

运行效果:

下一篇文章链接:Qt6教程之三(1) Qt开发基于Windows、Linux系统的桌面软件客户端

上一篇文章链接:Qt6教程之二(7) input widgets 

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值