QML 电池案例实践笔记

最新推荐文章于 2024-06-26 00:35:53 发布

NGC_2070

最新推荐文章于 2024-06-26 00:35:53 发布

阅读量3.2k

点赞数 9

分类专栏： # QT

本文链接：https://blog.csdn.net/baidu_41388533/article/details/117092505

版权

QT 专栏收录该内容

110 篇文章 25 订阅

订阅专栏

QML 电池案例实践笔记

参考猫鱼大佬视频：https://www.bilibili.com/video/BV1Ay4y1W7xd?p=67
主要是 C++ 与 qml 的交互，以及重写绘图函数。
显示效果如下：

工程文件中添加

EleCell.h

#ifndef ELECELL_H
#define ELECELL_H

#include <QQuickPaintedItem>

class EleCell : public QQuickPaintedItem
{
    Q_OBJECT
    Q_PROPERTY(quint32 electric READ getElectric  WRITE  setElectric NOTIFY electricChanged)
    Q_PROPERTY(QColor  color READ getColor  WRITE  setColor NOTIFY colorChanged)
    Q_PROPERTY(quint32 threshold READ  getThreshold WRITE setThreshold NOTIFY thresholdChanged)

public:
    using QQuickPaintedItem::QQuickPaintedItem;

    //重写绘制
    void paint(QPainter*) override;

    //设置电量
    void setElectric( quint32 value) noexcept;
    quint32  getElectric()const noexcept;

    //设置颜色
    void setColor(QColor value)noexcept;
    QColor  getColor()const noexcept;

    //设置阈值
    void setThreshold(quint32 value) noexcept;
    quint32  getThreshold()const noexcept;

signals:
    void electricChanged();
    void colorChanged();
    void thresholdChanged();

private:
    quint32 m_iLineWidth = 1;
    quint32 m_iElectric = 70;
    QColor  m_qColor = Qt::green;
    QColor  m_qWarningColor = Qt::red;
    quint32 m_iThreshold = 20;

};

#endif // ELECELL_H

EleCell.cpp

#include "EleCell.h"
#include <QPainter>
#include <QPen>
#include <QBrush>

void EleCell::paint(QPainter *painter)
{
    QPen pen;
    pen.setColor(Qt::darkRed);
    pen.setWidth(m_iLineWidth);
    painter->setPen(pen);

    //电池头部
    quint32 headWidth = width() * 0.1;
    quint32 headHeight = height() * 0.3;

    auto cellWidth  = width() - pen.width() -headWidth;
    auto cellHeight = height() - pen.width();

    //电池
    painter->drawRect(0, 0, cellWidth, cellHeight);

    auto electricWidth = (cellWidth - pen.width())*m_iElectric / 100;
    auto electricHeight = cellHeight - pen.width();
    painter->fillRect(pen.width(), pen.width(), electricWidth, electricHeight, \
                      m_iElectric > m_iThreshold ? m_qColor : m_qWarningColor);

    //电池头部填充
    auto headX = cellWidth + pen.width();
    auto headY = height() / 2 -  headHeight/ 2;
    painter->fillRect(headX, headY, headWidth, headHeight, Qt::black);

}

void EleCell::setElectric(quint32 value) noexcept
{
    if(value < 0 || value > 100)
    {
        return;
    }

    m_iElectric = value;
    emit electricChanged();
    update();
}

quint32 EleCell::getElectric() const noexcept
{
    return m_iElectric;
}

void EleCell::setColor(QColor value) noexcept
{
    m_qColor = value;
    emit colorChanged();
}

QColor EleCell::getColor() const noexcept
{
    return m_qColor;
}

void EleCell::setThreshold(quint32 value) noexcept
{
    if(value < 0 || value > 100)
    {
        return;
    }

    m_iThreshold = value;
    emit thresholdChanged();
    update();
}

quint32 EleCell::getThreshold() const noexcept
{
    return m_iThreshold;
}

main.cpp

#include "EleCell.h"
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlEngine>
#include <QQuickStyle>

int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif

    QGuiApplication app(argc, argv);

    //设置主题样式
    QQuickStyle::setStyle("Material");

    //注册自定义C++类型、
    qmlRegisterType<EleCell>("com.mycompany.elecell", 1, 0, "EleCell");

    QQmlApplicationEngine engine;
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

main.qml

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.5
import com.mycompany.elecell 1.0

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Column{
        id: col
        spacing: 30
        anchors.fill: parent
        //自定义控件
        EleCell{
            id:cell
            anchors.horizontalCenter: parent.horizontalCenter
            width:200
            height:80
            electric:slider.value
            color:"green"
            threshold:30
        }

        Slider{
            id:slider
            anchors.horizontalCenter: parent.horizontalCenter
            from:0
            value:25
            to:100
        }
    }
}