Qt/C++ - 090-сабақ. Бағдарламада виджетті бөлектеу арқылы оқыту диалогын қалай жасауға болады

Qt, QWidget, Stylesheet, Tutorial

Мен диалогтық терезе жасалатын шағын қолданбаны зерттеуді ұсынамын, оның арқасында пайдаланушы сіздің бағдарламаңыздың функционалдығын біле алады, қандай бағдарламалық жасақтама виджетінің не үшін жауапты екенін кезең-кезеңімен түсіндіре алады.

Мұндай функционалдылықты жүзеге асыру үшін қолданба терезесін жасау қажет, онда «Алдыңғы виджет», «Келесі виджет», «Терезені жабу» түймелері болады. Іске қосу алдында виджеттер бағдарламаңызда пайдаланушыға ұсынылуы тиіс ретпен осы терезеге, сондай-ақ виджеттерді сипаттайтын мәтіндік хабарлар жіберіледі.

Бағдарлама келесідей болады:

Кіріспе

Біз келіскеніміздей, біз сөйлесу керек виджеттердің тізбегін қабылдайтын оқыту диалогын жасаймыз.
Бұл жағдайда ағымдағы виджет оның мәнерлерін қайта анықтау арқылы бөлектеледі, яғни қызыл виджет жақтауы орнатылады.
Бірден айта кету керек, стильдерді стильдер кестесі арқылы қайта анықтау кейбір платформалар үшін кейбір виджеттердің стильдерін толығымен қайта анықтауға әкеп соғуы мүмкін, сондықтан толығымен реттелетін қолданба стилін жасаған дұрыс немесе paintEvent әдісін қайта анықтау арқылы виджеттерді қайта анықтаған дұрыс. . Кез келген жағдайда, әдемірек бөлектеу үшін қосымшаны сәндеу бойынша көп жұмыс істеуге тура келеді, бірақ оқу құралының мақсаттары үшін мен стильдердің минималды қайта анықтауын ғана көрсетемін.

Оқулық диалогы

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.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 әдісін қайта белгілей отырып, бағдарламада пайдаланылған барлық виджеттердің мұрасын пайдалануға немесе виджеттер пайдаланатын барлық мәнерлерді толығымен қайта анықтауға болады. осылайша стиль кестесін орнату кезінде бұзылуға арналмаған мәнерлер.