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