自定義組件

約 606 字大約 2 分鐘

2025-07-17

組件開發

實現一個點擊切換進度的電量指示燈。

步驟如下所示：

創建自定義組件類

創建TestLight.cpp和TestLight.h文件

組件類需繼承于TpWidget

#ifndef __TEST_LIGHT_H
#define __TEST_LIGHT_H

#include "TpWidget.h"
#include "tpEvent.h"

class TestLight : public TpWidget
{
public:
    TestLight(TpWidget *parent);

    virtual ~TestLight();
};

#endif

定義電量最大格數和當前顯示格數變量

int maxCount_;
int count_;

重寫onPaintEvent事件，根據電量格數繪制效果

獲取繪制畫筆

TpPainter* painter = event->painter();

繪制底色

painter->setPen(_RGB(255, 255, 255));
painter->setBrush(TpBrush(_RGB(255, 255, 255)));
painter->drawRect(0, 0, width(), height());

根據最大格數計算每個格子的寬度

int spacing = 3;
int singleWidth = (width() - (maxCount_ + 1) * spacing) / maxCount_;

根據當前電量繪制電量格子

painter->setPen(_RGB(128, 255, 128));
painter->setBrush(TpBrush(_RGB(128, 255, 128)));
for (int i = 0; i < count_; ++i)
{
    int drawX = spacing + i * (singleWidth + spacing);
    painter->drawRect(drawX, spacing, singleWidth, height() - spacing * 2);
}

重寫 onMousePressEvent 捕獲鼠標按下事件，獲取鼠標點擊狀態

bool TestLight::onMousePressEvent(TpMouseEvent *event)
{
    TpWidget::onMousePressEvent(event);

    count_++;
    if (count_ > maxCount_)
        count_ = 0;

    return true;
}

組件測試

TestLight* light = new TestLight(this);
testButton_->setSize(200, 50);
testButton_->move(150, 300);

演示效果

完整源碼如下

TestLight.h
#ifndef __TEST_LIGHT_H
#define __TEST_LIGHT_H

#include "TpWidget.h"
#include "tpEvent.h"

class TestLight : public TpWidget
{
public:
    TestLight(TpWidget *parent);

    virtual ~TestLight();

public:
    virtual bool onMousePressEvent(TpMouseEvent *event) override;

    virtual bool onPaintEvent(TpPaintEvent *event) override;

private:
    int maxCount_;
    int count_;
};

#endif

TestLight.cpp
#include "TestLight.h"
#include "TpPainter.h"

TestLight::TestLight(TpWidget *parent)
    : TpWidget(parent), maxCount_(4), count_(0)
{
}

TestLight::~TestLight()
{
}

bool TestLight::onMousePressEvent(TpMouseEvent *event)
{
    TpWidget::onMousePressEvent(event);

    count_++;
    if (count_ > maxCount_)
        count_ = 0;

    return true;
}

bool TestLight::onPaintEvent(TpPaintEvent *event)
{
    TpWidget::onPaintEvent(event);

    TpPainter *painter = event->painter();

    painter->setPen(_RGB(255, 255, 255));
    painter->setBrush(TpBrush(_RGB(255, 255, 255)));

    painter->drawRect(0, 0, width(), height());

    int spacing = 3;
    int singleWidth = (width() - (maxCount_ + 1) * spacing) / maxCount_;

    painter->setPen(_RGB(128, 255, 128));
    painter->setBrush(TpBrush(_RGB(128, 255, 128)));
    for (int i = 0; i < count_; ++i)
    {
        int drawX = spacing + i * (singleWidth + spacing);
        painter->drawRect(drawX, spacing, singleWidth, height() - spacing * 2);
    }

    return true;
}