c++ - 创建教程模式

Question

我有一个 Qt 应用程序，我想在用户第一次访问该应用程序时显示一个小教程。像这样:

我怎样才能在 Qt 上做这样的事情？

我在 Windows 上使用 Qt 5.4。

Answer 1

要执行此任务，我们必须制作半透明背景，我们通过激活属性 Qt::WA_TranslucentBackground 来完成，然后我们使用 QPainterPath 绘制矩形减去透明圆。

然后使用 eventFilter 了解一些事件，例如它们何时显示，如果您更改大小或位置。

然后创建一个结构来存储数据，在本例中为圆心、半径、文本位置和文本本身。

然后添加next和return按钮，页面变化的逻辑在slot中处理。

tutowidget.h

#ifndef TUTOWIDGET_H
#define TUTOWIDGET_H

#include <QWidget>
class QButtonGroup;

class TutoWidget : public QWidget
{
    Q_OBJECT
    struct Pages{
        QPoint center;
        int radius;
        QPoint  pText;
        QString text;
    };
public:
    TutoWidget(QWidget *parent);
    void addPage(const QPoint &center, int radius, const QPoint &pText, const QString & text);
    bool eventFilter(QObject *watched, QEvent *event);
protected:
    void paintEvent(QPaintEvent *);
private slots:
    void onClicked(int id);
private:
    QWidget *mParent;
    QButtonGroup *group;
    QVector<Pages> pages;
    int currentIndex = -1;
};

#endif // TUTOWIDGET_H

tutowidget.cpp

#include "tutowidget.h"

#include <QVBoxLayout>
#include <QButtonGroup>
#include <QPushButton>
#include <QEvent>
#include <QTimer>
#include <QPainter>

TutoWidget::TutoWidget(QWidget *parent):QWidget(0)
{
    setWindowFlags(Qt::FramelessWindowHint|Qt::Popup);
    setAttribute(Qt::WA_TranslucentBackground, true);
    mParent = parent;
    mParent->installEventFilter(this);

    QVBoxLayout *vlay = new QVBoxLayout(this);
    vlay->addItem(new QSpacerItem(20, 243, QSizePolicy::Minimum, QSizePolicy::Expanding));
    QHBoxLayout *hlay = new QHBoxLayout;
    vlay->addLayout(hlay);
    group = new QButtonGroup(this);
    const QStringList nameBtns{"Return", "Next"};
    for(int i=0; i < nameBtns.length(); i++){
        QPushButton* btn = new QPushButton(nameBtns[i]);
        btn->setFlat(true);
        group->addButton(btn, i);
        hlay->addWidget(btn);
    }
    connect(group, static_cast<void (QButtonGroup::*)(int)>(&QButtonGroup::buttonClicked),
            this, static_cast<void (TutoWidget::*)(int)>(&TutoWidget::onClicked));
    hlay->addItem(new QSpacerItem(40, 20, QSizePolicy::Expanding, QSizePolicy::Minimum));
    group->button(0)->hide();
}

void TutoWidget::addPage(const QPoint &center, int radius, const QPoint &pText, const QString &text)
{
    pages << Pages{center, radius, pText, text};
    if(currentIndex == -1){
        currentIndex = 0;
        update();
    }
}

bool TutoWidget::eventFilter(QObject *watched, QEvent *event){
    if(watched == mParent){

        switch (event->type()) {
        case QEvent::Show:
            QTimer::singleShot(10,  this, &QWidget::show);
            break;
        case QEvent::Close:
            close();
            break;
        case QEvent::Move:
            move(mParent->mapToGlobal(QPoint(0, 0)));
            break;
        case QEvent::Resize:
            resize(mParent->size());
            break;
        default:
            break;
        }
    }
    return QWidget::eventFilter(watched, event);
}

void TutoWidget::paintEvent(QPaintEvent *){
    QPainter painter(this);
    painter.setPen(Qt::NoPen);
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setBrush(QColor(100, 100, 100, 200));
    QPainterPath path;
    if(currentIndex != -1){
        QPoint center = pages[currentIndex].center;
        int radius = pages[currentIndex].radius;
        QString text = pages[currentIndex].text;
        QPoint pText = pages[currentIndex].pText;
        path.moveTo(center + radius/2*QPoint(1, 0));
        path.arcTo(QRect(center-radius/2*QPoint(1, 1),radius*QSize(1, 1)), 0, 360);
        path.addText(pText, font(), text);
    }
    path.addRect(rect());
    painter.drawPath(path);
}

void TutoWidget::onClicked(int id)
{
    if(id == 0){
        if(currentIndex > 0)
            currentIndex--;
    }
    else if(id == 1){
        if(currentIndex < pages.count()-1)
            currentIndex++;
    }
    update();
    group->button(0)->setVisible(currentIndex!=0);
    group->button(1)->setVisible(currentIndex!=(pages.count()-1));
}

例子:

tuto = new TutoWidget(this); // this is the widget
tuto->addPage(QPoint(200, 200), 40, QPoint(100, 100), "some text1");
tuto->addPage(QPoint(300, 300), 60, QPoint(200, 100), "some text2");
tuto->addPage(QPoint(100, 200), 100, QPoint(200, 50), "some text3");
tuto->addPage(QPoint(200, 100), 80, QPoint(100, 200), "some text4");

完整的例子在下面link