Пропоную вивчити невеликий додаток, в якому буде створено діалогове вікно, завдяки якому користувача можна буде навчити функціоналу вашої програми, покроково пояснивши, який віджет програми за що відповідає.
Щоб реалізувати подібний функціонал, потрібно створити вікно програми, яке буде володіти кнопками "Попереднього віджета", "Наступного віджета", "Закриття вікна". Перед запуском в це вікно будуть передаватися віджети, в тій послідовності, в якій вони повинні бути представлені користувачеві в вашій програмі, а також текстові повідомлення, які будуть описувати віджети.
Програма буде виглядати наступним чином:
Вступ
Як ми і домовилися, ми створимо
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 не розбивати ті стилі, які не планувалися ламати.
