Евгений Легоцкой1 декабря 2019 г. 14:22

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

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

Для реализации такого функционала необходимо создать окно приложения, в котором будут кнопки «Предыдущий виджет», «Следующий виджет», «Закрыть окно». Перед запуском в это окно будут переданы виджеты в той последовательности, в которой они должны быть представлены пользователю в вашей программе, а также текстовые сообщения, которые будут описывать виджеты.

Программа будет выглядеть так:

Введение

Как мы и договаривались, мы создадим диалоговое окно обучения , которое будет принимать последовательность виджетов, о которых нам нужно поговорить.
При этом текущий виджет будет выделен переопределением его стилей, то есть будет установлена красная рамка виджета.
Сразу скажу, что переопределение стилей через 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

И тогда нам нужно будет создать этот диалог в слоте запуска диалога туториала, а также добавить в диалог виджеты и информацию об этих виджетах.

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 те стили, которые не планировалось ломать.

Рекомендуем хостинг TIMEWEB
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.
- блог компании
Поддержать автора Donate

Комментарии

Только авторизованные пользователи могут публиковать комментарии.
Пожалуйста, авторизуйтесь или зарегистрируйтесь
Card image cap
Pulsum Via

Проект для путешественников от EVILEG.

Перейти
Timeweb

Позвольте мне порекомендовать вам отличный хостинг, на котором расположен EVILEG.

В течение многих лет Timeweb доказывает свою стабильность.

Для проектов на Django рекомендую VDS хостинг

Посмотреть Хостинг
Поделиться в социальных сетях
Donate

Проект EVILEG перешёл на некоммерческую основу и будет развиваться исключительно на энтузиазме создателя сайта, энтузиазме пользователей, пожертвованиях и реферальной системе хостинга

Спасибо за вашу поддержку

Доступные способы поддержки проекта

PayPal

PatreonYooMoneyПодробнее
s

C++ - Тест 002. Константы

  • Результат:50баллов,
  • Очки рейтинга-4
s

C++ - Тест 001. Первая программа и типы данных

  • Результат:66баллов,
  • Очки рейтинга-1
r

C++ - Тест 002. Константы

  • Результат:58баллов,
  • Очки рейтинга-2
Последние комментарии

Qt/C++ - Урок 061. Добавление изображений в приложение методом Drag And Drop из файлового менеджера

Доброго времени суток. А если нужно и изображение и текст? Что-то потерялся немного.... // Вместо отрисовки иконки и текста будем отрисовывать только одно изображение // с н…
АС

Qt/C++ - Урок 004. QSqlTableModel или Как представить таблицу из БД в Qt?

error insert into TableExample " Количество параметров не совпадает" Я путь свой прописывала и даже бд удаляла, чтобы заново сделать, не работает. (всё остальное как у вас... Вроде ка…
i
ЛД

GameDev на Qt - Урок 1. Отслеживание перемещения мыши в QGraphicsScene

Вполне возможно, что ты не закинул graphicsView в дизайнере в виджет
ЛД

GameDev на Qt - Урок 1. Отслеживание перемещения мыши в QGraphicsScene

Кому интересно, поворот в slotTarget можно в одну строку организовать this->setRotation(90 + rotation() + qRadiansToDegrees(qAtan2(mapFromScene(point).y(), mapFromScene(point).x())));
Сейчас обсуждают на форуме
K

Sorting the added QML elements in the ListModel

buy accutane online forum https://isotretinoinxp.top
  • Nomad
  • 30 июля 2022 г. 5:42

Как работать с HTMX?

Приветствую колеги. На днях наткнулся на вот это : https://htmx.org/ На офф сайте написанно вот такая фраза: htmx gives you access to AJAX, CSS Transitions, We…
h
  • harisr
  • 25 июля 2022 г. 2:56

QT - Native App Integration

Привет, у нас уже есть собственное приложение для Android. Можем ли мы интегрировать пользовательское представление QT в приложение со всем приложением QT внутри представления. Если да, ука…

Правильный запуск сервера на vps - Django

О я как то себе дома локальный сервер создавал. Вам же нужно просто сделать ручками конфигурацию системы. Настроить Nginx ну либо Apache (тут кому что нравится). Соответственно БД и всё остально…
o

Распознание объектов

Я к тому, что, возможно, софт уже есть.
О нас
Услуги
© EVILEG 2015-2022
Рекомендует хостинг TIMEWEB