C++ 创建教程模式

我有一个Qt应用程序，希望在用户首次访问该应用程序时显示一个小教程。大概是这样的：

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

---

我正在Windows上使用Qt 5.4。

没有任何东西可以帮助我开箱即用

您可以有一个覆盖小部件，它通常是隐藏的，并且只在“教程”模式下显示。通过使用

QPainterPath

可以轻松地打孔，首先在其中添加整个小部件的矩形，然后在需要打孔的位置添加一个圆，然后填充生成的路径

通过映射到教程覆盖小部件，可以获得gui元素的绝对位置

---

我建议您实现一个抽象的

Tutorial

类，或者至少实现一个指针/文本对的基本列表，用于您想要有教程的每个小部件，然后在Tutorial中注册该小部件的每个元素-指向gui元素的指针和教程文本。然后，当调用该小部件的教程时，覆盖小部件将变为可见，并允许迭代小部件的特定元素，这些元素包含与它们相关的信息，并在迭代时重新绘制以显示圆圈和文本。

没有任何东西可以在开箱即用的情况下提供帮助

您可以有一个覆盖小部件，它通常是隐藏的，并且只在“教程”模式下显示。通过使用

QPainterPath

可以轻松地打孔，首先在其中添加整个小部件的矩形，然后在需要打孔的位置添加一个圆，然后填充生成的路径

通过映射到教程覆盖小部件，可以获得gui元素的绝对位置

---

我建议您实现一个抽象的

Tutorial

类，或者至少实现一个指针/文本对的基本列表，用于您想要有教程的每个小部件，然后在Tutorial中注册该小部件的每个元素-指向gui元素的指针和教程文本。然后，当调用该小部件的教程时，覆盖小部件将可见，并允许迭代小部件中具有相关信息的特定元素，并在迭代时重新绘制以显示圆圈和文本。

要执行此任务，我们必须制作半透明背景，我们通过激活属性

Qt:：WA_transparcentbackground

，然后使用QPainterPath绘制减去透明圆的矩形

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

然后创建一个结构来存储数据，在这种情况下是圆心、半径、文本位置和文本本身

然后添加next和return按钮，并在插槽中处理页面更改的逻辑

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

---

完整的示例如下

要执行此任务，我们必须制作半透明背景，我们通过激活属性

Qt:：WA_transparcentbackground

来完成，然后我们使用QPainterPath绘制矩形减去透明圆

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

然后创建一个结构来存储数据，在这种情况下是圆心、半径、文本位置和文本本身

然后添加next和return按钮，并在插槽中处理页面更改的逻辑

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

---

完整的示例如下

将QLabel添加为中心小部件的子部件，这样它就可以填充整个小部件并位于顶部（您可能不想将其放入布局中，但可以手动设置其高度和宽度以填充该区域）。将半透明图像放置到标签中，以显示所需内容。您可以在代码中绘制图像，也可以单独绘制图像并从磁盘/资源加载图像。或者代替QLabel，使用定制的QWidget，根据需要半透明地绘制所需的paintEvent。不太清楚你如何使这个圆圈完全透明。然而，你也可以像海德所说的那样，在按钮上方画一个红色圆圈或动画，醒目的文字。返回和下一个是按钮？@eyllanesc它可以是按钮，也可以是任何其他方式进入下一个教程“页面”。将QLabel添加为中心小部件的子级，这样它就填充了整个小部件，并位于顶部（您可能不想将其放入布局中，但需要手动设置其高度和宽度以填充该区域）。将半透明图像放入标签中，显示所需内容。您可以用代码绘制图像，也可以单独绘制并从磁盘/资源加载图像。或者，使用自定义QWidget代替QLabel，使用paintEvent绘制所需内容，根据需要半透明。如果要灰显屏幕，可以使用。不确定如何使用你可以让这个圆圈完全透明。但是，你也可以像海德所说的那样，在按钮上方画一个红色圆圈或动画，醒目的文字。返回和下一个是按钮？@eyllanesc它可以是按钮或任何其他方式进入下一个教程“页面”。添加点不好，因为布局gui元素会改变位置。最好使用a我建议的方法是添加元素指针并映射坐标以找到实际的元素位置大概是为了关闭教程而不是进入上一页，因此它也应该出现在第一页。最后，完整的实现必须以更符合逻辑的方式确定文本位置，这取决于圆的xy位置和窗口的大小。@dtech我理解您的观点，我的意图不是给出一个完整的解决方案，只是给出一些如何做的例子，这些点我已经想到了，但我想c

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");