Qt/C++ - Урок 090. Як зробити діалог навчання з підсвічуванням віджетів в програмі

Qt, QWidget, Stylesheet, Tutorial

Пропоную вивчити невеликий додаток, в якому буде створено діалогове вікно, завдяки якому користувача можна буде навчити функціоналу вашої програми, покроково пояснивши, який віджет програми за що відповідає.

Щоб реалізувати подібний функціонал, потрібно створити вікно програми, яке буде володіти кнопками "Попереднього віджета", "Наступного віджета", "Закриття вікна". Перед запуском в це вікно будуть передаватися віджети, в тій послідовності, в якій вони повинні бути представлені користувачеві в вашій програмі, а також текстові повідомлення, які будуть описувати віджети.

Програма буде виглядати наступним чином:

Вступ

Як ми і домовилися, ми створимо tutorial діалог, який буде приймати послідовність віджетів, про які нам потрібно розповісти.
При цьому поточний віджет буде підсвічуватися за допомогою перевизначення його стилів, тобто буде здаватися червона межа віджета.
Відразу обмовлюся, що перевизначення стилів через stylesheet може спричинити повне перевизначення стилів деяких віджетів під деякими платформами, тому краще створити повністю кастомізованих стиль додатки або перевизначити віджети з перевизначенням методу paintEvent . У будь-якому випадку для більш красивою підсвічування доведеться зробити значну роботу по стилізації додатки, але в цілях навчальної статті я покажу лише мінімальне перевизначення стилів.

TutorialDialog

Діалог створюється в графічному дизайнера Qt, щоб незагромождать корисний код. Тобто сам діалог формується за допомогою ui файлу. Виглядати він буде таким чином. Програмний код ви зможете взяти в репозиторії прикладів EVILEG в кінці статті.

TutorialDialog.h

У загловочном файлі діалогового вікна знадобиться використовувати структуру TutorialInfo , яка буде зберігати покажчик на віджет, а також його опис.
Також нам знадобиться змінна, яка буде зберігати старий стиль поточного віджета і індекс поточного віджета.

#ifndef TUTORIALDIALOG_H
#define TUTORIALDIALOG_H
 
#include <QDialog>
 
namespace Ui {
class TutorialDialog;
}
 
class TutorialDialog : public QDialog
{
    Q_OBJECT
 
public:
    explicit TutorialDialog(QWidget *parent = nullptr);
    ~TutorialDialog();
 
    // add widget and text information about this widget to tutorial dialog
    void addWidgetToTutorial(QWidget* widget, const QString& text);
 
private:
    void onPreviousButtonClicked(); // slot which reacts on click of previous button
    void onNextButtonClicked();     // slot which reacts on click of next button
    void updateButtonsEnabled();    // update actual enabled status of buttons
    void returnOldStyle();          // return old style to widget, which was highlighted
    void setTextAndStyle();         // set text information to tutorial dialog and set highlight style to widget
 
    Ui::TutorialDialog *ui;
 
    // This structure contains text information aboout some widget
    struct TutorialInfo
    {
        QWidget* widget;
        QString text;
    };
 
    // highlight style
    const QString HIGHLIGHT_STYLE {"border: 1px solid red"};
    QVector<TutorialInfo> m_infoItems;      // vector of widgets in tutorial
    int m_currentTutorialInfoIndex {-1};    // index of current highlighted widget
    QString m_oldStyleOfWidget;             // old widget style
};
 
#endif // TUTORIALDIALOG_H
 

TutorialDialog.cpp

#include "TutorialDialog.h"
#include "ui_TutorialDialog.h"
 
#include <QDebug>
 
TutorialDialog::TutorialDialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::TutorialDialog)
{
    ui->setupUi(this);
    setModal(true);                 // this dialog should be modal
    setWindowFlags(Qt::Window);     // but it doesn`t create shadow on mainwindow
 
    connect(ui->closeButton, &QPushButton::clicked, this, &TutorialDialog::close);
    connect(ui->previousButton, &QPushButton::clicked, this, &TutorialDialog::onPreviousButtonClicked);
    connect(ui->nextButton, &QPushButton::clicked, this, &TutorialDialog::onNextButtonClicked);
 
    updateButtonsEnabled();
}
 
TutorialDialog::~TutorialDialog()
{
    // When dialog was destrcucted, we should set up old style to current widget
    returnOldStyle();
    delete ui;
}
 
void TutorialDialog::addWidgetToTutorial(QWidget* widget, const QString& text)
{
    if (m_infoItems.empty())
    {
        m_currentTutorialInfoIndex = 0;
    }
 
    m_infoItems.push_back({widget, text});
    updateButtonsEnabled();
 
    if (m_infoItems.size() == 1)
    {
        setTextAndStyle();
    }
}
 
void TutorialDialog::onPreviousButtonClicked()
{
    returnOldStyle();
    --m_currentTutorialInfoIndex;
    setTextAndStyle();
    updateButtonsEnabled();
}
 
void TutorialDialog::onNextButtonClicked()
{
    returnOldStyle();
    ++m_currentTutorialInfoIndex;
    setTextAndStyle();
    updateButtonsEnabled();
}
 
void TutorialDialog::updateButtonsEnabled()
{
    ui->previousButton->setEnabled(m_currentTutorialInfoIndex != -1 && m_currentTutorialInfoIndex > 0);
    ui->nextButton->setEnabled(m_currentTutorialInfoIndex != -1 && m_currentTutorialInfoIndex < m_infoItems.size() - 1);
}
 
void TutorialDialog::returnOldStyle()
{
    if (m_currentTutorialInfoIndex != -1)
    {
        m_infoItems[m_currentTutorialInfoIndex].widget->setStyleSheet(m_oldStyleOfWidget);
    }
}
 
void TutorialDialog::setTextAndStyle()
{
    ui->textBrowser->setText(m_infoItems[m_currentTutorialInfoIndex].text);
    m_oldStyleOfWidget = m_infoItems[m_currentTutorialInfoIndex].widget->styleSheet();
    m_infoItems[m_currentTutorialInfoIndex].widget->setStyleSheet(HIGHLIGHT_STYLE);
}
 

MainWindow

А потім нам буде необхідно в слоті запуску tutorial діалогу виконати створення цього діалогу, а також додавання віджетів та інформації про ці віджети в діалог.

MainWindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H
 
#include <QMainWindow>
 
QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE
 
class MainWindow : public QMainWindow
{
    Q_OBJECT
 
public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
 
private:
    void onStartTutorialButtonClicked();
 
    Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H
 

MainWindow.cpp

#include "MainWindow.h"
#include "ui_MainWindow.h"
#include "TutorialDialog.h"
#include "TutorialDialog.h"
 
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    connect(ui->startTutorialButton, &QPushButton::clicked, this, &MainWindow::onStartTutorialButtonClicked);
}
 
MainWindow::~MainWindow()
{
    delete ui;
}
 
void MainWindow::onStartTutorialButtonClicked()
{
    TutorialDialog tutorialDialog;  // Create tutorial dialog
 
    // Add widgets to tutorial dialog
    tutorialDialog.addWidgetToTutorial(ui->projectStructureTreeView, tr("This is project structure"));
    tutorialDialog.addWidgetToTutorial(ui->createProjectButton, tr("Create new project using this button"));
    tutorialDialog.addWidgetToTutorial(ui->openProjectButton, tr("Open your project using this button"));
    tutorialDialog.addWidgetToTutorial(ui->infoWidget, tr("Here You will see some information about objects in your project"));
 
    // Start tutorial dialog
    tutorialDialog.exec();
}
 

Висновок

Як розвитку ідеї вікна навчання можна скористатися або успадкування всіх використовуваних в програмі віджетів з перевизначення методу paintEvent , щоб додавати і видаляти підсвічувати кордон, або повністю перевизначити всі стилі, що використовуються віджетів, щоб при установці stylesheet не розбивати ті стилі, які не планувалися ламати.